@use '../mixins';

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
ul,
li {
    margin: 0;
    padding: 0;
}

a {
    color: #1371fa;
    text-decoration: none;
    &:hover {
        color: #01b2eb;
    }
}

em {
    font-weight: 700;
    font-style: normal;
}

ul {
    list-style-type: none;
}

body {
    color: #525252;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    line-height: 1.4;
    margin: 0;
    /* for sticky mobile menu */
    position: relative;
}

.warm {
    color: #e03342;
}

.cold {
    color: #1eb3e8;
}

.help {
    font-size: 0.875rem;
}

.updateTime {
    font-size: 0.85rem;
    padding: mixins.spacing(1);
}

ul.links {
    li {
        a {
            font-size: 0.875rem;
            border-radius: 4px;
            display: block;
            color: #fff;
            font-weight: 700;
            background-color: #01b2eb;
            text-align: center;
            padding: mixins.spacing(1, 0);
            margin: mixins.spacing(0, 0, 1, 0);
        }
    }

    @include mixins.up('sm') {
        display: flex;

        li {
            flex: 1;
            a {
                margin: 0;
            }

            &:first-child {
                padding-right: mixins.spacing(0.5);
            }
        }
    }
}

.gridContainer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .item {
        flex-grow: 0;
        max-width: 100%;
        flex-basis: 100%;

        &.xs2 {
            @include mixins.up('xs') {
                flex-grow: 0;
                max-width: 16.666666%;
                flex-basis: 16.666666%;
            }
        }

        &.xs3 {
            @include mixins.up('xs') {
                flex-grow: 0;
                max-width: 25%;
                flex-basis: 25%;
            }
        }

        &.xs4 {
            @include mixins.up('xs') {
                flex-grow: 0;
                max-width: 33.3333333%;
                flex-basis: 33.3333333%;
            }
        }

        &.xs6 {
            @include mixins.up('xs') {
                flex-grow: 0;
                max-width: 50%;
                flex-basis: 50%;
            }
        }

        &.xs8 {
            @include mixins.up('xs') {
                flex-grow: 0;
                max-width: 66.666666%;
                flex-basis: 66.666666%;
            }
        }

        &.xs9 {
            @include mixins.up('xs') {
                flex-grow: 0;
                max-width: 75%;
                flex-basis: 75%;
            }
        }

        &.xs12 {
            @include mixins.up('xs') {
                flex-grow: 0;
                max-width: 100%;
                flex-basis: 100%;
            }
        }

        &.sm1 {
            @include mixins.up('sm') {
                flex-grow: 0;
                max-width: 8.333333%;
                flex-basis: 8.333333%;
            }
        }

        &.sm2 {
            @include mixins.up('sm') {
                flex-grow: 0;
                max-width: 16.666666%;
                flex-basis: 16.666666%;
            }
        }

        &.sm3 {
            @include mixins.up('sm') {
                flex-grow: 0;
                max-width: 25%;
                flex-basis: 25%;
            }
        }

        &.sm5 {
            @include mixins.up('sm') {
                flex-grow: 0;
                max-width: 41.666666%;
                flex-basis: 41.666666%;
            }
        }

        &.sm6 {
            @include mixins.up('sm') {
                flex-grow: 0;
                max-width: 50%;
                flex-basis: 50%;
            }
        }

        &.md2 {
            @include mixins.up('md') {
                flex-grow: 0;
                max-width: 16.666666%;
                flex-basis: 16.666666%;
            }
        }

        &.md3 {
            @include mixins.up('md') {
                flex-grow: 0;
                max-width: 25%;
                flex-basis: 25%;
            }
        }

        &.md4 {
            @include mixins.up('md') {
                flex-grow: 0;
                max-width: 33.333333%;
                flex-basis: 33.333333%;
            }
        }

        &.md5 {
            @include mixins.up('md') {
                flex-grow: 0;
                max-width: 41.666666%;
                flex-basis: 41.666666%;
            }
        }

        &.md6 {
            @include mixins.up('md') {
                flex-grow: 0;
                max-width: 50%;
                flex-basis: 50%;
            }
        }
    }
}

#wrap {
    background-color: #fff;
    min-width: 320px;

    @include mixins.up('md') {
        width: 980px;
        margin: 0 auto;
    }
}

h1 {
    text-transform: uppercase;
    margin: mixins.spacing(1, 0, 0, 0);
    font-weight: 400;
    font-size: 1.5rem;

    &.blue {
        color: #1eb3e8;
        font-weight: 300;
        text-transform: none;
        margin: mixins.spacing(2.5, 0, 0, 0);
    }

    @include mixins.up('sm') {
        font-size: 1.875rem;
    }
}

h2 {
    text-transform: uppercase;
    margin: mixins.spacing(1, 0, 0, 0);
    font-weight: 400;
    font-size: 1rem;

    padding: mixins.spacing(0, 0, 0, 1);
    border-bottom: 4px solid #eee;
    margin: mixins.spacing(1, 0, 0.5, 0);
}

header {
    display: flex;
    flex-wrap: wrap;
    margin: mixins.spacing(2, 1, 1, 1);

    .toplinks {
        display: none;
    }

    .logo {
        flex: 1 0 50%;
        border-bottom: 1px solid #e2e2e2;
        margin: mixins.spacing(0, 0, 1.5, 0);
    }

    .language {
        flex: 1 0 50%;
        text-align: right;
        border-bottom: 1px solid #e2e2e2;
        margin: mixins.spacing(0, 0, 1.5, 0);

        select {
            cursor: pointer;
            padding: mixins.spacing(0.5, 1);
            border-radius: 4px;
            border: 1px solid #e2e2e2;
            border-bottom: 1px solid #9b9b9b;
            background: rgb(255, 255, 255);
            background: linear-gradient(180deg, rgba(255, 255, 255, 1) 40%, rgba(226, 226, 226, 1) 100%);
        }
    }

    .search {
        flex: 1 0 85%;
        position: relative;

        input {
            width: 240px;
            font-size: 1rem;
            line-height: 1.2rem;
            border: 1px solid #01b2eb;
            background-color: #eee;
            padding: mixins.spacing(0.5, 1);
        }

        img.search {
            position: absolute;
            width: auto;
            height: 29px;
        }

        ul#searchResults {
            width: 390px;
            left: 0;
            top: 42px;
            z-index: 100000;
            position: absolute;
            max-height: 20rem;
            overflow-y: auto;
            border: 1px solid #40baea;
            border-radius: 3px;
            background-color: white;
            color: #484848;

            &.hidden {
                display: none;
            }

            li {
                cursor: pointer;
                font-size: 0.8125rem;
                overflow-x: hidden;
                padding: mixins.spacing(0.75, 1);
                border-bottom: 1px solid #f2f2f2;

                img {
                    margin-right: mixins.spacing(0.5);
                    vertical-align: middle;
                }

                &:hover,
                &.selected {
                    color: white;
                    background-color: #40baea;
                }
            }
        }
    }

    .locate {
        flex: 1 0 15%;
        cursor: pointer;
    }

    ul.breadcrumb {
        flex: 1 0 100%;
        display: flex;
        font-size: 0.6rem;

        li {
            color: #01b2eb;
            a {
                color: #484848;
                cursor: pointer;
                padding-right: mixins.spacing(1);

                &:hover {
                    color: #01b2eb;
                }

                img {
                    vertical-align: middle;

                    &.arrow {
                        margin-left: 4px;
                    }
                }
            }
        }
    }

    @include mixins.up('md') {
        .toplinks {
            order: 0;
            display: flex;
            flex: 1 0 calc(100% - 140px);
            font-size: 0.85rem;
            margin: mixins.spacing(0, 0, 4, 0);

            .active {
                flex: 0;

                a {
                    color: #666;
                    font-weight: 700;
                    border-top: 1px solid #e2e2e2;
                    border-left: 1px solid #e2e2e2;
                    border-right: 1px solid #e2e2e2;
                }
            }

            .extlinks {
                flex: 1;
                border-bottom: 1px solid #e2e2e2;
            }

            a {
                display: inline-block;
                color: #717171;
                padding: mixins.spacing(0.5, 2);
                white-space: nowrap;
            }
        }

        .language {
            flex: 1 0 120px;
            order: 1;
            border: 0;
            margin: 0;
        }

        .logo {
            flex: 0 0 235px;
            order: 2;
            border: 0;

            img {
                width: 184px;
            }
        }

        .search {
            flex: 0 0 465px;
            order: 3;

            input {
                width: 390px;
                font-weight: 200;
                font-size: 1.35rem;
                border: 2px solid #01b2eb;
                padding: mixins.spacing(0.75, 1);
            }

            img {
                &.search {
                    height: 42px;
                }
            }
        }

        .locate {
            flex: 1 0 55px;
            order: 4;

            img {
                width: 50px;
                height: 50px;
            }
        }

        ul.breadcrumb {
            order: 5;
            font-size: 0.875rem;
            /* match with .logo width */
            padding-left: 235px;
        }
    }
}

footer {
    h2 {
        color: white;
        font-size: 0.85rem;
        border: 0;
        margin: 0;
        padding: mixins.spacing(1, 0, 0.5, 0);
    }

    .tabBar {
        background-color: #f2f2f2;
        height: 1.5rem;
        position: relative;
        font-size: 0.85rem;

        ul {
            max-width: 980px;
            margin: 0 auto;
            display: flex;

            li {
                flex: 0;
                text-transform: uppercase;
                font-weight: 700;
                background-color: #1371f9;
                color: white;
                position: relative;
                top: -2px;
                padding: mixins.spacing(0.5, 3);
                border-radius: mixins.spacing(0.5, 0.5, 0, 0);
            }
        }
    }

    .app {
        background-color: #1f7ffd;

        div {
            max-width: 980px;
            margin: 0 auto;
            padding: mixins.spacing(2, 0, 2, 3);

            ul {
                display: flex;
                padding: mixins.spacing(1, 0, 0, 0);

                li {
                    padding-right: mixins.spacing(2);
                }
            }
        }
    }

    .copyright {
        font-size: 0.75rem;
        max-width: 980px;
        margin: 0 auto;

        p {
            padding: mixins.spacing(1);
        }

        @include mixins.up('sm') {
            display: flex;

            p {
                flex: 1;

                &:first-child {
                    padding-left: mixins.spacing(3);
                }
            }
        }
    }

    .links {
        background-color: #1371f9;
        padding-bottom: mixins.spacing(4);
        font-size: 0.8rem;

        .linkContainer {
            display: flex;
            justify-content: space-between;
            max-width: 980px;
            margin: 0 auto;
            padding: mixins.spacing(0, 0, 0, 3);

            flex-wrap: wrap;

            @include mixins.up('md') {
                flex-wrap: nowrap;
                padding: mixins.spacing(1, 0, 0, 3);
            }

            .linklist {
                flex: 1 0 50%;
                margin-top: mixins.spacing(2);

                @include mixins.up('md') {
                    flex: 1;
                }
            }

            .contact {
                margin-top: mixins.spacing(2);
                width: 100%;
                display: flex;

                @include mixins.up('md') {
                    width: auto;
                    display: block;
                    padding-left: mixins.spacing(2);
                    border-left: 1px solid #338afd;
                }

                div {
                    flex: 1;
                }

                h2 {
                    font-size: 1rem;
                }

                ul {
                    padding-bottom: mixins.spacing(3);
                }
            }

            ul {
                &.notitle {
                    padding-top: mixins.spacing(4);
                }

                li {
                    a {
                        color: white;
                    }
                }
            }
        }
    }
}

nav {
    &.mobile {
        position: sticky;
        top: 0px;
        z-index: 50000;
        background-color: rgba(246, 246, 246, 0.97);
        border-top: 1px solid #e2e2e2;

        @include mixins.up('md') {
            display: none;
        }

        p {
            color: #01b2eb;
            text-align: center;
            text-transform: uppercase;
            margin: 0;
            padding: mixins.spacing(1, 0);
            background-image: url(/public-legacy/icon-list.png);
            background-repeat: no-repeat;
            background-position: 10px 50%;
            border-bottom: 1px solid #e2e2e2;
        }

        ul {
            display: none;
            position: absolute;
            background-color: #f6f6f6;

            &.visible {
                display: flex;
                flex-wrap: wrap;
            }

            li {
                flex: 1 0 50%;
                max-width: 50%;
                text-align: center;
                font-size: 0.9rem;
                padding: mixins.spacing(1, 0);
                border-bottom: 1px solid #e2e2e2;

                &:nth-child(odd) {
                    border-right: 1px solid #e2e2e2;
                }

                &.main {
                    text-transform: uppercase;
                }

                &.white {
                    background-color: #fff;
                }

                a {
                    display: block;
                    color: #484848;

                    &.active {
                        color: #01b2eb;
                    }
                }
            }
        }
    }

    &.desktop {
        display: none;

        @include mixins.up('md') {
            display: block;
            position: relative;

            .header {
                background-image: url(//img-a.foreca.net/f/img/header.png);
                background-repeat: no-repeat;
                z-index: 1000;
                position: relative;

                height: 45px;
            }

            ul {
                position: relative;
                top: -10px;
                display: flex;
                justify-content: flex-start;
                border-bottom: 1px solid #e2e2e2;

                &.mapLinks {
                    li {
                        text-transform: none;
                        border: 0;
                        font-weight: 500;
                        font-size: 0.9rem;

                        a {
                            padding: mixins.spacing(1);

                            &.active {
                                background-color: inherit;
                            }
                        }
                    }
                }

                li {
                    flex: 0 0 auto;
                    border-right: 1px solid #e2e2e2;
                    text-transform: uppercase;
                    font-weight: 700;
                    font-size: 0.8125rem;

                    &:last-child {
                        border: 0;
                    }

                    a {
                        display: block;
                        color: #484848;
                        padding: mixins.spacing(2.5, 1, 1, 1);

                        &:hover {
                            color: #01b2eb;
                            cursor: pointer;
                        }

                        &.active {
                            color: #01b2eb;
                            background-color: #f2f2f2;
                        }
                    }
                }
            }
        }
    }
}

.locationHeader {
    padding: mixins.spacing(0, 0, 0.5, 2.5);

    &.map {
        padding: mixins.spacing(0, 0, 0.5, 1);
        margin-left: 10px;
        margin-right: 10px;
        border-bottom: 4px solid #eee;
        margin-bottom: mixins.spacing(0.5);

        h1 {
            font-size: 1rem;
        }
    }

    &.browse {
        border: none;
    }

    h1 {
        font-weight: 500;
    }

    @include mixins.up('md') {
        padding: 0;

        &.map {
            border-bottom: 1px solid #e2e2e2;
            margin: mixins.spacing(0, 0, 0.5, 0);
        }

        border-bottom: 1px solid #e2e2e2;
    }

    .blue {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        #homeLocation {
            position: relative;
            height: 36px;
            width: 36px;
            background-image: url(/public-legacy/images/location-gray.png);
            background-position: center;
            background-size: 30px;
            background-repeat: no-repeat;
            @media (hover: hover) {
                &:hover {
                    background-image: url(/public-legacy/images/location-yellow.png);
                }
            }
            &.enabled {
                background-image: url(/public-legacy/images/location-yellow.png);
            }
        }
    }
}

#topBanner {
    display: none;

    @include mixins.up('md') {
        display: block;
        background-color: #fff;
        background: linear-gradient(to bottom, #fff 34%, #eee 100%);
        margin-bottom: 2px;

        .banner {
            width: 980px;
            min-height: 90px;
            margin: 0 auto;
        }
    }
}

nav.side {
    display: none;
}

.naviwrap {
    @include mixins.up('md') {
        display: flex;

        nav.side {
            display: block;
        }

        .split {
            width: calc(100% - 160px);

            h1 {
                font-size: 1rem;
                padding-top: mixins.spacing(1);
            }
        }
    }
}

.contentContainer {
    padding: mixins.spacing(0, 1);

    @include mixins.up('md') {
        display: flex;
        padding: 0;

        .content {
            width: calc(980px - 336px);

            > section {
                margin-top: mixins.spacing(5);
            }
        }

        section.right {
            width: 336px;
            display: block;
        }
    }
}

ul.location-list {
    li {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f2f2f2;

        padding: mixins.spacing(0.5, 1);
        font-weight: 700;
        font-size: 0.75rem;

        align-items: center;
        min-height: 1.875rem;

        p {
            &.title {
                flex: 1;
            }

            &.value {
                font-weight: 700;
                padding-left: mixins.spacing(2);
            }

            &.obs {
                text-align: right;
                padding-right: 60px;
            }

            a {
                text-decoration: none;
                text-transform: capitalize;
            }
        }
    }
}

.contentWrap {
    padding: mixins.spacing(1, 0.5);

    @include mixins.up('md') {
        padding: mixins.spacing(0, 3, 0, 0);
    }
}

/* front page obs + 3d forecast */
.contentWrap {
    @include mixins.up('md') {
        .front-split {
            margin-bottom: 40px;

            .obs-3d {
                display: flex;
                margin-bottom: 10px;

                .station {
                    width: 60%;
                }
                .threeday {
                    width: 40%;
                }
            }
        }
    }
}

/*
 * ADS
 */

header {
    .ad-container {
        flex: 1 0 100%;
        text-align: center;
        margin: 0 0 0.5rem 0;

        @include mixins.up('sm') {
            display: none;
        }
    }
}

.content,
.contentWrap {
    .ad-container {
        text-align: center;

        @include mixins.up('sm') {
            display: none;
        }
    }
}

section.right {
    .ad-container {
        display: none;

        @include mixins.up('sm') {
            display: block;
            text-align: center;
        }
    }
}