/* Phone and tablet layout fixes. Loaded after foundation.css and app.css. */

/* Images and videos never wider than the screen */
img, video {
    max-width: 100%;
    height: auto;
}

/* Let top-bar menus wrap onto a second line instead of running off the screen */
.top-bar-left > .menu {
    display: flex;
    flex-wrap: wrap;
}
.top-bar-left > .menu > li {
    display: block;
}
.top-bar-left > .menu.vertical {
    flex-direction: column;
}
@media screen and (min-width: 40em) {
    .top-bar-left > .menu.medium-horizontal {
        flex-direction: row;
    }
}

/* Stacked tables (phones/tablets): show the column name before each value */
@media screen and (max-width: 63.9375em) {
    table.stack td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: bold;
    }
    table.stack tr {
        border-bottom: 2px solid #cacaca;
    }
}

/* Phones and tablets: banner with logo + gif sized by screen width so they don't overlap */
@media screen and (max-width: 63.9375em) {
    .fixed-bg.banner-two {
        min-height: 0 !important;
        height: 17vw;
        background-size: 56% auto, 38% auto !important;
        background-position: left center, right center !important;
    }
}

/* Phones */
@media screen and (max-width: 39.9375em) {
    /* Header banner: shorter so the logo and gif don't overlap */
    .fixed-bg {
        min-height: 70px !important;
        box-shadow: 2px 4px 6px 2px #888888;
    }

    /* Mountain photo banner (financial and address pages) needs more height to show the peaks */
    .fixed-bg.banner-photo {
        min-height: 160px !important;
    }

    /* Clock overlaps the banner on small screens; phones show the time anyway */
    #wb_JavaScript1 {
        display: none;
    }

    /* Mountain picture: iPhone/iPad don't support fixed backgrounds */
    .fixed-bg2 {
        min-height: 200px !important;
        background-attachment: scroll !important;
    }

    /* Volcano picture on the Family Videos page */
    .volcano-img {
        position: static !important;
        display: block;
        margin: 1rem auto;
    }

    /* Easier-to-tap links and buttons */
    .top-bar-left > .menu > li > a {
        padding: 0.9rem 1rem;
    }
    table.stack .button {
        width: 100%;
    }
}

/* Tablets: fixed backgrounds misbehave on iPad too */
@media (hover: none) and (pointer: coarse) {
    .fixed-bg2 {
        background-attachment: scroll !important;
    }
}