/*
Theme Name:     Frontierline - Nightly
Description:    The Firefox Nightly blog, a child theme of Frontierline.
Author:         Craig Cook, Kohei Yoshino
Template:       frontierline
Version:        2.0
*/

@font-face {
    font-display: swap;
    font-family: Metropolis;
    font-style: normal;
    font-weight: normal;
    src: url('fonts/Metropolis-Medium.woff2') format('woff2'),
         url('fonts/Metropolis-Medium.woff') format('woff');
}

@font-face {
    font-display: swap;
    font-family: Metropolis;
    font-style: normal;
    font-weight: bold;
    src: url('fonts/Metropolis-Bold.woff2') format('woff2'),
         url('fonts/Metropolis-Bold.woff') format('woff');
}

@font-face {
    font-display: swap;
    font-family: Metropolis;
    font-style: italic;
    font-weight: normal;
    src: url('fonts/Metropolis-MediumItalic.woff2') format('woff2'),
         url('fonts/Metropolis-MediumItalic.woff') format('woff');
}

@font-face {
    font-display: swap;
    font-family: Metropolis;
    font-style: italic;
    font-weight: bold;
    src: url('fonts/Metropolis-BoldItalic.woff2') format('woff2'),
         url('fonts/Metropolis-BoldItalic.woff') format('woff');
}


body,
.entry-info {
    color: #42425a; /* gray 80 */
}

h1, h2, h3, h4, h5, h6, legend {
    color: #20123a; /* ink */
    font-family: Metropolis, Inter, X-LocaleSpecific, sans-serif;
}

.entry-link:link,
.entry-link:visited {
    color: #20123a; /* ink */
}

.entry-link:hover .entry-title,
.entry-link:focus .entry-title {
    color: #0060df;
}

#masthead {
    background-color: #073072; /* blue 80 */
}

#site-title span,
#site-description span {
    background-color: transparent;
}

#nav-util,
.nav-util-search .fm-search input,
.nav-util-search .fm-search .button {
    background-color: #09204d; /* blue 90 */
}

.pagination a,
.pagination .current {
    color: #20123a; /* ink */
    border-color: #20123a; /* ink */
}

.nav-global-twitter a,
.nav-global-join a {
    padding-left: 30px;
}

.nav-global-twitter a::before,
.nav-global-join a::before {
    display: inline-block;
    margin: 0 5px -.35em -30px;
    width: 25px;
    height: 20px;
    -webkit-background-size: 25px 200px;
    background-size: 25px 200px;
    background-image: url("img/icon-sprite.svg");
    background-repeat: no-repeat;
    content: '';
}

.nav-global-twitter a::before {
    background-position: 0 -160px;
}

.nav-global-twitter a:hover::before,
.nav-global-twitter a:focus::before {
    background-position: 0 -180px;
}

.nav-global-join a::before {
    background-position: 0 -120px;
}

.nav-global-join a:hover::before,
.nav-global-join a:focus::before {
    background-position: 0 -140px;
}

.nav-global .fx-cta {
    display: none;
}

.nav-global .fx-cta .button {
    font-size: 12px;
    font-size: .75rem;
    padding: .15em 20px;
    margin: -.25em 0 0;
}

.nav-global-fxdownload .button {
    white-space: nowrap;
}

.fx-footer {
    border-top: 1px solid #ccc;
    padding: 30px 0 0;
    margin-top: 30px;
    text-align: center;
}

.fx-footer h4 {
    margin-bottom: 1em;
}

#social * {
    font-family: inherit !important;
}

#social .social-post,
#social-tabs-comments {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto !important;
    padding: 20px !important;
    min-width: 300px;
}

#social #reply-title {
    padding: 0 !important;
    font-size: 28px;
    font-size: 1.75rem;
    font-weight: bold;
    background-image: none !important;
}

#social #respond textarea.social-input,
#social #respond input.social-input {
    width: 100%;
    max-width: 100% !important;
}

#social .social-comment-body {
    line-height: 1.6 !important;
}

#social .social-replied {
    display: inline-block !important;
    position: static !important;
}

@media screen and (max-width: 460px) {
    #social .social-sign-in-links a {
        display: block !important;
        float: none !important;
        margin: 15px auto !important;
    }
}

@media screen and (min-width: 460px) {
    .nav-global .fx-cta {
        display: inline-block;
        float: right;
        margin: -.25em 20px 0;
    }
}

@media screen and (min-width: 480px) {
    #social .social-post,
    #social-tabs-comments {
        width: 460px;
    }
}

@media screen and (min-width: 760px) {
    .nav-global .fx-cta {
        float: right;
        margin: .25em 0 0 10px;
    }

    .nav-global .fx-cta .button {
        padding: .25em 20px;
        font-size: 16px;
        font-size: 1rem;
        border-width: 2px;
        -webkit-transition: font-size 250ms ease-in-out, padding 250ms ease-in-out;
                transition: font-size 250ms ease-in-out, padding 250ms ease-in-out;
    }

    .nav-global.is-minified .fx-cta {
        margin: -.25em 0 0 20px;
    }

    .nav-global.is-minified .fx-cta .button {
        font-size: 12px;
        padding: .15em 20px;
    }

    #social .social-post,
    #social-tabs-comments {
        width: 740px;
    }
}

@media screen and (min-width: 1000px) {
    #social .social-post,
    #social-tabs-comments {
        width: 980px;
    }
}

/* "These weeks in Firefox" posts special rules */
@media screen and (min-width: 760px) {
    .single .category-news .entry-header .entry-title,
    .page .category-news .entry-header .entry-title {
        font-size: 2rem;
    }
}

@media screen and (min-width: 1000px) {
    .single .category-news .entry-header .entry-title,
    .page .category-news .entry-header .entry-title {
        font-size: 3rem;
    }
}

.single .category-news .entry-content h3,
.page .category-news .entry-content h3,
.single .category-news .entry-content h4,
.page .category-news .entry-content h4 {
    color: white;
    background-color: black;
    padding: 0.3rem;
}

.single .category-news .entry-content h3 :link,
.single .category-news .entry-content h3 :visited,
.page .category-news .entry-content h3 :link,
.page .category-news .entry-content h3 :visited,
.single .category-news .entry-content h4 :link,
.single .category-news .entry-content h4 :visited,
.page .category-news .entry-content h4 :link,
.page .category-news .entry-content h4 :visited {
    color: white;
}

.single .category-news .entry-content h3 :link:hover,
.single .category-news .entry-content h3 :visited:hover,
.page .category-news .entry-content h3 :link:hover,
.page .category-news .entry-content h3 :visited:hover,
.single .category-news .entry-content h4 :link:hover,
.single .category-news .entry-content h4 :visited:hover,
.page .category-news .entry-content h4 :link:hover,
.page .category-news .entry-content h4 :visited:hover {
    color: lightskyblue;
}

.single .category-news .entry-content h4,
.page .category-news .entry-content h4 {
    font-weight: normal;
}
/* end of "These weeks in Firefox" posts special rules */

/* Newsletter */
#newsletter-subscribe {
    background-color: #073072; /* blue 80 */
    color: #fff;
}

#newsletter-subscribe a:link,
#newsletter-subscribe a:visited,
#newsletter-subscribe h3,
#newsletter-subscribe h4 {
    color: #fff;
}

#newsletter-subscribe .form-title h4 {
    font-family: Inter, X-LocaleSpecific, sans-serif;
}

#newsletter-subscribe input[type="email"] {
    background-color: #fff;
    color: #20123a; /* ink */
}

#newsletter-subscribe .form-button {
    background-color: #0060df;
    border-color: #0060df;
    color: #fff;
}

#newsletter-subscribe .form-button:hover,
#newsletter-subscribe .form-button:focus {
    background-color: #0250bb;
    border-color: #0250bb;
}

/* Randomized backgrounds for fallback thumbnails. */
.post-mini .image-fallback.color-1,
.post-summary .image-fallback.color-1 {
    background-color: #ff298a; /* pink 50 */
}

.post-mini .image-fallback.color-2,
.post-summary .image-fallback.color-2 {
    background-color: #ff4f5e; /* red 50 */
}

.post-mini .image-fallback.color-3,
.post-summary .image-fallback.color-3 {
    background-color: #ff7139; /* orange 50 */
}

.post-mini .image-fallback.color-4,
.post-summary .image-fallback.color-4 {
    background-color: #3fe1b0; /* green 50 */
}

.post-mini .image-fallback.color-5,
.post-summary .image-fallback.color-5 {
    background-color: #0060df; /* blue 50 */
}

.post-mini .image-fallback.color-6,
.post-summary .image-fallback.color-6 {
    background-color: #b833e1; /* purple 50 */
}