@import 'includes/vars';
@import 'includes/mixins';
@import 'includes/grid';

$home-involved-background-y = 50px;
$blue-background-text-color = #fff;

#home {
    create-home-gradient-background(#00539f);
    remove-main-spacing();
    use-white-logo();

    /* general structure adjustments */
    #main-header {
        background: none;
        border-bottom-color: rgba(255, 255, 255, 0.2);
    }

    /* update main nav menu color */
    override-main-nav-color($blue-background-text-color);

    /* update the homepage search size */
    minimize-header-search();

    .home-callouts {
        background: #4d4e53;
    }

    /*  Change open auth text in white */
    .oauth-login-options {
        color: $blue-background-text-color;
    }

    .search-wrap {
        input {
            set-placeholder-style(color, $blue-background-text-color);
        }
    }

    main {
        background: transparent;
    }

    /* shared spacing in prominent block*/
    .home-masthead, .home-hacks, .home-demos, .home-contribute {
        padding: $first-content-top-padding 0;
    }

    /* shared basic tag updates throughout the homepage */
    h2, h3 {
        > i {
            display: inline-block;
            position: relative;
            margin-left: 0;
            background-image: url($logo-sprite-url);
            background-size: 132px;
            background-position: 0 -143px;
            background-repeat: no-repeat;
        }
    }

    h2 {
        > i {
            width: 64px;
            height: 64px;
            color: #0095dd;
            background-position: 0 -222px;
            background-size: 205px auto;
            set-font-size(30px);
            margin-right: 5px;

            &.blue {
                background-position: 0 -340px;
                color: $blue-background-text-color;
            }

            &[class^='icon-']:before {
                margin: 18px 0 0 0;
                display: block;
                text-align: center;
            }
        }
    }

    h3 {
        clearfix();
        text-transform: uppercase;

        i {
            width: 42px;
            height: 39px;
            background-position: 0 -147px;
            background-size: 134px auto;
            color: #0095dd;
            float: left;

            &:before {
                margin: 11px 0 0 0;
                display: block;
                text-align: center;
            }
        }

        &.zones, &.connect {
            span {
                padding-top: 10px;
            }
        }

        span {
            float: left;
        }
    }

    .entry-meta {
        set-smaller-font-size();
        font-style: italic;
    }

    .user-state {
        > {$selector-icon} {
            color: $blue-background-text-color;
        }
    }
}

/* homepage masthead (search, feature callouts) */
.home-masthead {

    h1 {
        color: $blue-background-text-color;
        margin: 0 auto;
        width: 60%;

        span {
            bidi-style(padding-left, 20%, padding-right, 0);
            display: block;
        }
    }

    .home-search-form {
        padding: ($grid-spacing * 2) 0;

        input {
            big-search();
            color: $blue-background-text-color;

            set-placeholder-style(color, $blue-background-text-color);
        }
    }
}

/* List of four feature columns within the masthead */
.home-features {
    &, a {
        color: $blue-background-text-color !important;
    }

    a {
        text-decoration: underline;
        outline-color: $blue-background-text-color;
    }

    h3 {
        set-larger-font-size();
        font-weight: bold;
        font-family: 'Open Sans Extra Bold', sans-serif;

        {$selector-icon} {
            bidi-style(margin-right, $icon-margin, margin-left, 0);
        }
    }

    li {
        padding: 4px 0;
    }

    .column-home-features {
        @extend $column-strip;
    }
}

/* three colorful callouts */
.column-callout    {
    @extend $column-4;
    position: relative;
    background-image: url($media-url-dir + 'promo-sprite.png');
    background-repeat: no-repeat;
    i {
        bidi-style(right, 5%, left, auto);
        position: absolute;
        top: 0;
        display: block;
    }

    span {
        padding-right: 20px;
    }

    a {
        color: $blue-background-text-color !important;
        display: block;
        padding: 100px $grid-spacing $grid-spacing $grid-spacing;
        position: relative;
        overflow-x: hidden;
        set-larger-font-size();

        &:before {
            bidi-style(content, '\f061', content, '\f060');
            bidi-style(right, $grid-spacing, left, auto);
            font-family: 'FontAwesome';
            bottom: $grid-spacing;
            position: absolute;
            set-font-size(24px);
            z-index: 4;
        }
    }

    &.callout-apps {
        background-position: 100% 0;
        background-color: #e66000;
    }

    &.callout-android {
        background-position: 100% -300px;
        background-color: #97c03d;
    }

    &.callout-firefoxos {
        background-position: 100% -600px;
        background-color: #0095dd;
    }
}

/* homepage hacks block of blog post summaries */
.home-hacks {
    background: #fff;

    .column-hacks {
        @extend $column-main;
    }

    .column-involved {
        @extend $column-strip;
    }

    li {
        padding-top: $grid-spacing;
        border-bottom: 1px solid #ececec;

        &:last-child {
            border-bottom: 0;
        }
    }

    h2.entry-title {
        letter-spacing: 0;
        line-height: normal;
        margin-bottom: 0;
        set-font-size($base-font-size);

        a {
            text-decoration: underline;
        }
    }

    .hacks {
        margin-bottom: ($grid-spacing / 2);
    }

    .home-involved-card {
        background: url($media-url-dir + 'home-globe.jpg') -90px $home-involved-background-y no-repeat #f4f7f8;

        a {
            color: $blue-background-text-color;
            text-decoration: none;
            padding: $grid-spacing;
            display: block;
        }

        .numbers {
            padding-bottom: 40px;
            line-height: 40px;

            .row1, .row2, .row3 {
                display: block;
            }
        }

        .number {
            set-font-size(30px);
            font-weight: bold;
        }

        h2 {
            set-larger-font-size();
            padding-bottom: ($grid-spacing / 2);
            border-bottom: 1px solid #e0e2e4;
            margin-bottom: 110px;
            bidi-style(margin-right, -($grid-spacing), margin-left, 0);
            font-weight: bold;
        }

        p {
            margin: 0;
            padding: 0;
            text-align: center;
        }

        .button {
            background-color: #48ade4 !important;
            font-size: $smaller-font-size !important;
            color: $blue-background-text-color !important;
            font-weight: bold;
        }
    }
}

/* demos section */
.home-demos {
    background: $light-background-color;

    .home-demos-list {
        clearfix();
        position: relative;
        height: 150px;
        overflow: hidden;
    }

    .home-demos-list-item {
        set-smaller-font-size();
        display: block;
        text-align: center;
        margin: 0 auto;
        font-style: italic;
        overflow: hidden;
        width: 194px;

        img {
            border: 6px solid #fff;
            display: block;
            vendorize(box-shadow, 2px 2px 1px rgba(0 , 0, 0, .1));
            margin-bottom: 6px;
            width: 180px;
            height: 133px;
        }
    }

    .owl-theme .owl-controls {
        margin-top: $grid-spacing;
    }
    .owl-item.loading {
        background: url('/media/js/libs/owl.carousel/owl-carousel/AjaxLoader.gif') no-repeat center center;
    }

    /* In right-to-left languages, show some carousel items in reverse order
       and hide the pager. This is not a permanent solution,
       https://bugzilla.mozilla.org/show_bug.cgi?id=992745 */
    html[dir='rtl'] & {
        .owl-item {
            float: right;
        }

        .owl-item.loading, .owl-controls {
            display: none;
        }

        .owl-carousel {
            margin-bottom: $grid-spacing;
        }
    }

    .preview {
        text-transform: uppercase;
        float: right;
        margin-top: -10px;

        span {
            display: block;
        }
    }
}


/* contribute section */
.home-contribute {
    background: #fff;

    a {
        text-decoration: underline;
    }

    h3 {
        set-larger-font-size();
        font-weight: bold;
        text-transform: uppercase;
    }

    li {
        border-bottom: 1px solid #ececec;
        padding: $list-item-spacing 0;

        &:last-child {
            border-bottom: 0;
        }
    }

    .home-contribute-recent {
        margin-top: ($grid-spacing / 2);
    }
}

/* tablet */
@media $media-query-tablet {
    #home {
        .home-masthead {
            h1, input {
                width: 90%;
            }
        }
    }

    .column-callout {
        a {
            set-font-size($base-bump-font-size);
        }
    }
}

/* mobile */
@media $media-query-mobile {
    #home {

        .home-masthead {
            h1, input {
                width: 90%;

                span {
                    padding-left: 0;
                }
            }
        }

        .column-callout, .column-home-features {
            width: auto !important;
            float: none;
            margin-bottom: $grid-spacing;
            margin-right: 0;
        }

        .column-callout {
            a {
                set-larger-font-size();
            }
        }

        .home-callouts {
            padding-top: 20px;
        }

        .column-home-features {
            li {
                display: inline-block;
                padding-right: $grid-spacing;
            }
        }

        .home-hacks {
            .column-hacks, .column-involved {
                float: none;
                width: auto;
            }

            .column-involved {
                margin-top: ($grid-spacing * 2);
            }

            .home-involved-card {
                background-position: center $home-involved-background-y;
            }
        }

        .home-masthead h1, .home-search-form {
            display: none;
        }

        .home-demos h2, .home-contribute h2, .column-hacks > h2 {
            set-font-size(20px);

            > i {
                display: none;
            }

            a {
                margin: 8px 0 0 0;
                display: block;
            }
        }

        .home-contribute {
            li {
                &:last-child {
                    border-bottom: 1px solid #ececec;
                }
            }
        }
    }
}

@media $media-query-small-mobile {
    .owl-theme .owl-controls .owl-page span {
        width: 8px;
        height: 8px;
        margin: 5px;
    }
}

/* right to left */
html[dir='rtl'] #home {

    h2 {
        > $selector-icon:before {
            margin-right: 22px;
        }

        a { /* this can be bidi-'d when we can accommodate for body */
            margin-right: ($grid-spacing * 2);
            margin-left: 0;
        }

    }

    h3 {
        i, span {
            float: right;
        }

        {$selector-icon} {
            margin-right: 0;
            margin-left: $icon-margin;
        }
    }

    i.icon-arrow-right:before {
        content: '\f060';
    }
}
