/* Globals ------------------------------------------------------- */

@import "icon.less";

@color_facebook: #3b5998;
@color_twitter: #55acee;
@color_youtube: #bb0000;
@color_instagram: #e95950;
@color_rss: #ff6600;

// Globals

@max-width: 968px;

// Freedom Tax Brand

@navy: #0E2959;
@gold: #E6B221;
@soft-blue: #67768f;
@soft-grey: #dddddd;

@green: #89b262;
@red: #be5959;


main {
    a[href*="ftaxes.com"] {
        .button.light();
        display: inline-block;
        padding-left: 1em;
        padding-right: 1em;

        &::before {
            display: inline-block;
            line-height: 1;
            margin-right: .25em;
            position: relative;
            top: .25em;
            content: "";
            background: url("../images/favicon/favicon-32x32.png") center center / 16px no-repeat;
            width: 16px;
            height: 16px;
        }
    }
}

.cover() {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.ft-gradient() {
    position: relative;
    background: linear-gradient(135deg, #B1CFD6 0%, #D3DFC8 100%);

    &::before {
        pointer-events: none;
        content: "";
        .cover();
        background-image: radial-gradient(50% 50%, ellipse cover, fade(#FBFBE1, 0%) 0%, fade(#C0DCDA, 100%) 100%);
        background-image: -moz-radial-gradient(50% 50%, ellipse cover, fade(#FBFBE1, 0%) 0%, fade(#C0DCDA, 100%) 100%);
        background-image: -webkit-radial-gradient(50% 50%, ellipse cover, fade(#FBFBE1, 0%) 0%, fade(#C0DCDA, 100%) 100%);
        background-image: -o-radial-gradient(50% 50%, ellipse cover, fade(#FBFBE1, 0%) 0%, fade(#C0DCDA, 100%) 100%);
        background-image: -ms-radial-gradient(50% 50%, ellipse cover, fade(#FBFBE1, 0%) 0%, fade(#C0DCDA, 100%) 100%);
        background-image: radial-gradient(50% 50%, ellipse cover, fade(#FBFBE1, 0%) 0%, fade(#C0DCDA, 100%) 100%);
        mix-blend-mode: saturation;
    }
}

.text-shadow() {
    text-shadow: 0 1px 1px fade(white, 50%);
}

.text-shadow-alt() {
    text-shadow: 0 1px 1px fade(black, 25%);
}

.box-shadow() {
    box-shadow: 0 1px 1 white;
}

.border-radius() {
    border-radius: 3px;
}

.reset() {
    margin: 0;
    padding: 0;
    list-style: none;
}

.flexer() {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.in {
    max-width: @max-width;
    padding: 0 40px;
    margin: 0 auto;
}

.icon {
    font-family: "Icon";

    &.mini {
        font-weight: 100 !important;
    }

    &.outline {
        font-weight: 500 !important;
    }

    &.glyph {
        font-weight: 900 !important;
    }
}

.button {
    display: inline-block;
    padding: .25em 1.5em;
    cursor: pointer;

    &.heavy {
        background: linear-gradient(to bottom, @gold 0%, darken(@gold, 10%) 100%);
        font-size: 112.5%;
        font-weight: 700;
        color: white;
        border-radius: 10em;
        .text-shadow-alt() !important;
        box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0);
        transition: .15s ease transform, .15s ease box-shadow;

        &:hover {
            transform: translate(0, 1px);
            box-shadow: inset 0 0 0 100px rgba(255, 255, 255, .1);
        }
    }

    &.light {
        font-size: 87.5%;
        background: @soft-grey;
        display: inline-block;
        .text-shadow();
        .border-radius();
        box-shadow: 0 1px 0 fade(@navy, 25%);
        transition: .15s ease transform, .15s ease box-shadow, .15s ease background;

        &:hover {
            transform: translate(0, 1px);
            text-decoration: none;
            background: lighten(@soft-grey, 5%);
            box-shadow: inset 0 -1px 0 fade(@navy, 10%);
        }
    }

    &:hover {
        text-decoration: none;
        transition: .1s ease transform, .1s ease box-shadow;
    }
}

// Styles

body {
    font-family: "PT Sans", sans-serif;
    background: white;
    color: @soft-blue;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5em;
    .reset();

    a {
        color: @navy;
        font-weight: 700;
        text-decoration: none;
    }

    main {

        a:hover {
            text-decoration: underline;
        }
    }

    h1, h2, h3, h4, h5, h6,
    .nh1, .nh2, .nh3, .nh4, .nh5, .nh6 {
        color: @navy;
        font-weight: 700;

        &.reset {
            font-weight: 300;
            font-size: inherit;
        }
    }

    figure {
        position: relative;
        padding: 0;
        margin: 0;
        max-width: 100%;
        border-radius: 2px;
        overflow: hidden;

        img {
            width: auto !important;
            height: auto !important;
            display: block;
            max-width: 100%;
        }

        figcaption {
            font-size: 75%;
            text-align: center;
            padding: .5em;
            background-color: #efefef;
        }

        &::after {
            content: "";
            .cover();
            border-radius: 2px;
            pointer-events: none;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
        }
    }
}

#page-wrapper {
    position: relative;
    min-height: 480px;
    background: linear-gradient(to bottom, @soft-grey 0%, white 480px);

    &::before {
        display: block;
        content: "";
        width: 100%;
        height: 10px;
        .ft-gradient();
        box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    }

    #page {
        position: relative;

        header.primary {
            margin: 0 auto;
            max-width: (@max-width + 80);
            background-image: radial-gradient(50% 100%, ellipse cover, fade(white, 100%) 0%, fade(white, 0%) 75%);
            background-image: -moz-radial-gradient(50% 100%, ellipse cover, fade(white, 100%), fade(white, 0%) 75%);
            background-image: -webkit-radial-gradient(50% 100%, ellipse cover, fade(white, 100%), fade(white, 0%) 75%);
            background-image: -o-radial-gradient(50% 100%, ellipse cover, fade(white, 100%), fade(white, 0%) 75%);
            background-image: -ms-radial-gradient(50% 100%, ellipse cover, fade(white, 100%), fade(white, 0%) 75%);
            background-image: radial-gradient(50% 100%, ellipse cover, fade(white, 100%), fade(white, 0%) 75%);

            .in {
                padding-top: 2rem;
                padding-bottom: 1rem;
                .flexer();
                align-items: flex-end;

                #logo {
                    max-width: 214px;
                }

                nav {

                    ul {
                        .flexer();
                        .reset();

                        li {
                            .reset();
                            margin-left: 1rem;

                            a {
                                font-weight: 300;
                                .text-shadow();
                                .border-radius();

                                &.button {
                                    .button();
                                }

                                &:hover {
                                    color: @soft-blue;
                                }

                                &.social {
                                    font-family: "Icon";
                                    font-size: 75%;

                                    &.facebook {
                                        color: @color_facebook;
                                    }

                                    &.twitter {
                                        color: @color_twitter;
                                    }

                                    &.instagram {
                                        color: @color_instagram;
                                    }
                                }
                            }

                            &.social-container {
                                margin: 0;
                            }

                            ul {
                                .reset();
                            }
                        }
                    }
                }
            }
        }

        main.primary {
            background: white;
            margin: 0 auto;
            .border-radius();
            max-width: (@max-width + 80);
            min-height: 200px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .15);

            #intro {
                position: relative;
                .flexer();
                align-items: flex-start;
                padding: 40px;
                box-shadow: inset 0 -1px 0 fade(black, 10%);

                .gradient-background {
                    .ft-gradient();
                    border-radius: 3px 3px 0 0;
                    .cover();
                    height: 170px;
                    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .10);
                }

                .step {
                    position: relative;
                    width: ~"calc(100% / 3)";

                    .heading {
                        text-align: center;
                        font-weight: 700;
                        text-transform: uppercase;
                        color: white;
                        font-size: 112.5%;
                        text-shadow: 0 1px 1px fade(black, 25%);
                        margin: 1rem auto 1.5em;
                        height: 24px;

                        span {
                            display: inline-block;
                            background: @navy;
                            font-weight: 700;
                            color: white;
                            width: 24px;
                            margin-right: .75em;
                            font-size: 87.5%;
                            text-align: center;
                            border-radius: 100%;
                            box-shadow: 0 0 0 5px white;
                        }
                    }

                    .glyph-container {
                        .flexer();
                        justify-content: center;
                        .ft-gradient();
                        width: 128px;
                        height: 128px;
                        margin: 0 auto;
                        border-radius: 100%;
                        text-align: center;
                        box-shadow: 0 0 0 10px white;
                        overflow: hidden;

                        .icon {
                            font-size: 3.5em;
                            color: white;
                            text-shadow: 0 1px 1px fade(black, 25%);
                        }
                    }

                    p {
                        color: @navy;
                        .text-shadow();
                        font-weight: 100;
                        text-align: center;
                        max-width: 50%;
                        line-height: 1.25em;
                        margin: 1.5em auto 0;
                    }
                }
            }

            .content-block {
                padding: 40px 0;
                width: 50%;

                header {
                    .flexer();
                    align-items: flex-end;
                    margin-bottom: 1rem;

                    h1, h2, h3, h4 {
                        line-height: 1em;
                        margin: 0;
                    }
                }

                .content {
                }
            }

            section#about-lead {
                position: relative;
                z-index: 0;
                padding: 24rem 0 1rem;
                background: linear-gradient(135deg, #B1CFD6 0%, #D3DFC8 100%);
                background-size: cover;
                background-position: center;

                // &::after {
                //     position: absolute;
                //     top: 0;
                //     left: 0;
                //     width: 100%;
                //     height: 100%;
                //     content: " ";
                //     background: linear-gradient(185deg, fade(black, 0%) 0%, fade(black, 50%) 100%);
                //     z-index: 1;
                //     box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
                // }

                h1 {
                    display: none;
                    position: relative;
                    margin: 0;
                    color: white;
                    z-index: 2;
                    text-shadow: 0 1px 0 fade(black, 35%);
                }
            }

            section#about-us {
                margin: 40px 0;

                .about-the-company {
                    margin-bottom: 40px;

                    > * {
                        margin: 1rem 0;
                    }

                    figure {
                        float: right;
                        clear: right;
                        margin-left: 20px;
                        margin-bottom: 1rem;
                        max-width: 320px;
                        transition: .5s ease max-width;

                        &.tall {
                            max-width: 240px;
                        }
                    }

                    &::after {
                        content: "";
                        display: table;
                        clear: both;
                    }
                }

                table {
                    border-collapse: collapse;
                    box-shadow: 0 -2px 0 rgba(0, 0, 0, .15);

                    tr {
                        box-shadow: 0 1px 0 rgba(0, 0, 0, .15);

                        th {
                            vertical-align: bottom;
                            text-transform: uppercase;
                            color: @navy;
                        }

                        td {
                            vertical-align: middle;

                            &:first-child {
                                font-size: 87.5%;
                            }
                        }

                        th, td {
                            padding: .5rem;
                            text-align: center;
                            line-height: 1.25;
                            width: 20%;
                            box-shadow: 1px 0 0 rgba(0, 0, 0, .15);

                            &:first-child {
                                width: 40%;
                                text-align: left;
                            }

                            &:last-child {
                                // padding-right: 0;
                                box-shadow: none;
                            }
                        }

                        .yes,
                        .no,
                        .na,
                        .unkown {
                            font-weight: bold;
                            mix-blend-mode: multiply;
                            letter-spacing: 1px;
                            text-transform: uppercase;

                            &::before {
                                margin-right: .5em;
                                line-height: 1;
                                font-family: "Icon";
                                font-weight: 100;
                                position: relative;
                                top: .1em;
                            }
                        }

                        .yes {
                            color: @green;

                            &::before {
                                content: "";
                            }
                        }

                        .no {
                            color: @red;

                            &::before {
                                content: "";
                            }
                        }

                        .na {
                            color: @red;

                            &::before {
                                content: "";
                            }
                        }

                        .unkown {
                            color: @red;

                            &::before {
                                content: "";
                            }
                        }
                    }
                }
            }

            section#home-content {
                .flexer();
                align-items: flex-start;
                flex-direction: row-reverse;

                .content-block:last-child {
                    box-shadow: 1px 0 0 fade(black, 10%);
                }

                .content {

                    > *:last-child {
                        margin-bottom: 0;
                    }

                    .teaser {

                    }
                }

                .teaser.about-us {

                    figure {
                        display: none;
                    }
                }

                .teaser.contact-us {

                    figure {
                        margin-bottom: 1rem;
                    }

                    ul {
                        .reset();
                    }
                }
            }

            section#guarantee {
                box-shadow: 0 -1px 0 fade(black, 10%);
                padding: 20px 0;
            }

            section#referral {
                box-shadow: 0 -1px 0 fade(black, 10%);
                padding: 20px 0;

                .in {
                    .flexer();

                    h3 {
                        .reset();

                        .icon {
                            line-height: 1em;
                            color: #A0C774;
                            margin-right: .25em;
                        }
                    }

                    p {
                        .reset();
                        font-size: 87.5%;
                    }
                }
            }

            #faq {
                padding: 40px 0;
                overflow: hidden;

                h1:first-of-type {
                    margin: 0 40px 2rem;
                    padding: 0 0 .5em;
                    border-bottom: 1px solid @soft-grey;
                }

                nav#faq-nav {
                    position: absolute;
                    width: 200px;
                    will-change: min-height;

                    ul {
                        .reset();
                        transform: translate(0, 0); /* For browsers don't support translate3d. */
                        transform: translate3d(0, 0, 0);
                        will-change: position, transform;

                        li {

                            a {
                                display: block;
                                font-size: 75%;
                                padding: .5em 1em;
                                color: @soft-blue;
                                line-height: 1.25;
                                border-top: 1px solid @soft-grey;
                                .text-shadow();
                                transition: .25s ease background, .25s ease color, .25s ease border, .25s ease box-shadow, .25s ease border-radius;

                                &.active {
                                    color: @navy;
                                }

                                &.mPS2id-clicked.active {
                                    color: @navy;
                                    background: @soft-grey;
                                    border-top: 1px solid fade(white, 25%);
                                    .border-radius();
                                    box-shadow: inset 0 -1px 0 fade(black, 15%);
                                }

                                &:hover {
                                    text-decoration: none;
                                }
                            }

                            &:first-of-type a {
                                border: none;
                            }
                        }
                    }
                }

                ul#faq-content {
                    .reset();
                    margin-left: 240px;

                    h1 {
                        .reset();
                    }

                    li {
                        border-top: 1px solid @soft-grey;

                        ul, ol {
                            margin: 1rem 0;
                            font-size: 87.5%;

                            li {
                                border: none;
                            }
                        }

                        strong, b {
                            color: @navy;
                        }

                        &:first-of-type {
                            border: none;
                        }
                    }
                }

                .mobile-faq {

                    ul#faq-content {
                        margin-left: 0;
                    }
                }
            }
        }

        footer.primary {
            font-size: 75%;

            > .in {
                .flexer();
            }

            .legal {
                justify-content: center;

                img {
                    margin: 20px;
                    max-height: 40px;
                }
            }
        }
    }

    .menu-button {
        display: none;
    }
}

.968() {

    #page-wrapper {

        #page {

            main.primary {
                border-radius: 0;
                box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
            }

            footer.primary {

                .in {
                    background: @soft-grey;
                }
            }
        }
    }
}

.768() {

    body {
        font-size: 14px;
    }

    .in {
        padding-left: 20px;
        padding-right: 20px;
    }

    #page-wrapper {

        #page {

            header.primary {

                .in {

                    nav {
                        position: relative;

                        .menu-button {
                            position: relative;
                            display: block;
                            color: @navy;
                            text-transform: uppercase;
                            font-weight: bold;
                            padding: .5em 1em;
                            z-index: 9999;
                            cursor: pointer;
                            border-radius: 3px 3px 0 0;
                            transition: .15s ease background, .15s ease box-shadow;
                        }

                        ul:not(.social) {
                            position: absolute;
                            top: 100%;
                            right: 0;
                            z-index: 9998;
                            text-align: right;
                            background: white;
                            padding: 20px;
                            display: block;
                            min-width: 140px;
                            max-width: 280px;
                            border-radius: 3px 0 3px 3px;
                            box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
                            opacity: 0;
                            pointer-events: none;
                            margin-top: -20px;
                            transition: .15s ease opacity, .15s ease margin-top;

                            li {
                                margin: 0 auto;

                                a {
                                    padding: .25em 0;
                                    display: block;

                                    &:not(.social) {
                                        box-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
                                    }

                                    &.button.heavy {
                                        display: block;
                                        .border-radius();
                                        padding: .25em;
                                        margin-top: .5em;
                                        text-align: center;
                                    }
                                }

                                ul {
                                    .flexer();
                                    margin-top: 1rem !important;
                                    font-size: 1rem;
                                }
                            }
                        }
                    }

                    nav.active,
                    nav:not(.mobile-nav):hover {

                        ul {
                            opacity: 1;
                            pointer-events: auto;
                            margin-top: 0;
                        }

                        .menu-button {
                            background: white;
                            box-shadow: 0 -2px 2px rgba(0, 0, 0, .1);
                        }
                    }
                }
            }

            main.primary {

                #intro {
                    display: block;

                    .step {
                        width: 100%;
                        .flexer();
                        padding: 2rem 0;

                        &:not(:last-child) {
                            border-bottom: 1px solid fade(white, 50%);
                            box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
                        }

                        .glyph-container {
                            display: block;
                            width: auto;
                            height: auto;
                            overflow: visible;
                            background: transparent;
                            box-shadow: none;
                            border-radius: 0;

                            &::beefore {
                                position: relative;
                            }
                        }

                        > * {
                            margin: 0 !important;
                            width: ~"calc(100% / 3)";

                            &:first-child {
                                text-align: left;
                            }

                            &:last-child {
                                text-align: right;
                            }
                        }
                    }

                    .gradient-background {
                        height: 100%;
                        border-radius: 0;
                        box-shadow: none;
                    }
                }

                #faq {

                    nav#faq-nav {
                        display: none;
                    }

                    ul#faq-content {
                        margin-left: 0;
                    }
                }
            }
        }
    }
}

.640() {

    #page-wrapper {

        #page {

            main.primary {

                section#home-content {
                    display: block;

                    .content-block {
                        width: 100%;

                        &.about-us.teaser {
                            box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1);
                        }
                    }
                }

                section#about-us {

                    .about-the-company {

                        figure {
                            max-width: 100%;
                            margin-left: 0;

                            &.tall {
                                max-width: 100%;
                            }
                        }
                    }
                }
            }

            section#referral .in {
                text-align: center;

                a.button {
                   margin: 1rem auto;
               }
            }
        }
    }
}

@media (max-width: (@max-width + 80px)) {
    .968();
}

@media (max-width: 768px) {
    .768();
}

@media (max-width: 640px) {
    .640();
}