@import '../environment';
@import '../shared/news';
@import '../shared/custom_fields';

main > .head
{
    height: auto;
    max-height: none;
    padding: 0;
    overflow: hidden;
    align-items: stretch;
    background-image: none;

    @include colored-background;

    @include for-desktops
    {
        align-items: stretch;

        &.reversed {
            flex-direction: row-reverse;
        }

        .action
        {
            margin-top: steps(1);
        }
    }

    .content
    {
        max-width: none;

        @include half-column;

        padding: steps(2) steps(3) steps(3);

        @include for-desktops
        {
            padding: steps(3.5) steps(5) steps(5);
        }
    }

    .text-block, .image-block
    {
        position: relative;
        min-height: steps(35);
    }

    .text-block {
        position: relative;
        display: flex;
        flex-direction: column;

        p.subheading {
            font-size: 16px;
            font-weight: bold;
            line-height: 23px;
            margin-bottom: -33px;
            color: $color-brand-darkest;
        }

        .heading-block {
            display: flex;
            margin-top: steps(6);

            p.heading, .bubble-wrapper {
                float: left;
            }

            p.heading {
                font-weight: bold;
                max-width: steps(50);
                min-height: auto;
                color: $color-brand-darker;
                margin-bottom: steps(3);

                @include for-phones
                {
                    margin-bottom: 0;
                }
            }
            .bubble-wrapper {
                padding-left: steps(4);
            }
        }

        p.text {
            padding: 0;
            font-size: 16px;
            line-height: 19px;
            color: $color-brand-darkest;
            clear: both;
        }

        p.action a.button {
            @include button-shadow;
            border-radius: 25px;
            margin-top: steps(3);
            font-weight: bold;
        }

        p.excuse {
            @include font-dimensions(10px, 12px);
            padding: 0;
            margin: 0;
            color: $color-pretext-normal;

            &:first-child
            {
                margin-top: steps(3);
            }
        }

        .footer-block {
            align-self: flex-end ;
            width: 100%;
        }
    }

    @include for-at-most-small-tablets
    {
        &.has-phone
        {
            position: relative;

            padding-top: 0;
        }
    }


    .heading
    {
        @include for-at-least-normal-tablets
        {
            min-height: 0;
        }
    }

    @include responsive-banner;
}

.quick-quote
{
    @include column-container(".panel");

    margin-top: steps(-3);
    margin-bottom: steps(3);

    .panel
    {
        padding-top: 0;
        padding-right: 0;
        padding-left: 0;
        margin: 0;

        background: $color-background-dark;

        &.presentation
        {
            @include for-at-most-small-tablets
            {
                display: none;
            }
        }
    }

    .policy-types
    {
        margin-bottom: steps(3);

        background: $color-background-darker;

        ul
        {
            @include tab-list;

            // force desktop-like design for mobile layout
            @include for-at-most-small-tablets
            {
                li
                {
                    display: inline-block;
                    width: 50%;
                    margin-top: 0;

                    text-align: center;
                    vertical-align: top;
                }

                a
                {
                    @include baseline-paddings(16px, steps(2), steps(1.5), steps(1.5));
                }

                .active
                {
                    > a::after
                    {
                        content: none;
                    }

                    .text
                    {
                        display: inline-block;

                        &::after
                        {
                            content: "";

                            display: block;
                            height: 3px;
                            margin: 12px 0 -15px;

                            background: $color-link-normal;
                        }
                    }
                }
            }

            @include for-at-least-normal-tablets
            {
                @include content-padding;
            }
        }

        @include for-at-least-normal-tablets
        {
            margin-bottom: steps(4);
        }
    }

    .policies
    {
        @include content-padding;
    }

    .policy
    {
        .js &
        {
            .heading,
            &:not(.active)
            {
                display: none;
            }
        }

        .heading
        {
            @include small-heading;
        }

        @include for-at-least-tablets
        {
            .field.person-id,
            .field.phone,
            .field.email
            {
                .control
                {
                    width: auto;
                }
            }

            .field.person-id
            {
                width: steps(34);
            }

            .field.phone,
            .field.email
            {
                float: left;
            }

            .field.phone
            {
                width: steps(22);
                margin-right: steps(4);
            }

            .field.email
            {
                width: steps(27);
            }

            .field.agree
            {
                clear: both;
            }
        }
    }

    @include for-at-least-normal-tablets
    {
        margin-top: steps(-7);
        margin-bottom: steps(7);

        .policy-types > ul,
        .policies
        {
            max-width: $max-page-content-width / 2;
            margin-left: auto;
            margin-right: 0;
        }
    }
}

.featured-products
{
    li.product
    {
        padding-bottom: steps(2.5);
        border-bottom: 1px solid $color-border-normal;
        margin: 0 $gutter (steps(3) - 1px);

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

    .header
    {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: steps(1);

        @include for-at-least-normal-tablets
        {
            .title
            {
                order: 2;
            }

            .bubble-wrapper
            {
                order: 1;
            }
        }

        .svg
        {
            flex: none;

            margin: steps(2) steps(3) steps(4) 0;

            color: $color-brand-darkest;
            text-align: left;
        }

        .title
        {
            @include serif-font-family;
            @include baseline-box(20px, steps(2.5), -0.1px);

            flex-grow: 1;
            margin-bottom: steps(2.5);
            color: $color-text-darkest;

            @include for-at-least-normal-tablets
            {
                flex-basis: 100%;
                @include baseline-box(22px, steps(3), -0.1px);
            }
        }

        .bubble-wrapper {
            .bubble
            {
                margin-right: steps(1);
                height: 107px;
                width: 107px;

                p {
                    padding-top: 0;
                    width: 77px;

                    &.number {
                        width: auto;
                    }
                }
            }
        }

        @include for-phones
        {
            flex-wrap: nowrap;
            margin-bottom: 20px;

            .title
            {
                font-size: 16px;
                order: 1;
            }

            .title, .svg.product, .svg.product > svg
            {
                display: inline-block;
                margin-bottom: 0;
                padding-bottom: 0;
            }

            .svg.product, .svg.product > svg
            {
                width: steps(5);
                height: steps(5);
            }


            .bubble-wrapper
            {
                flex-grow: 0;
                order: 2;

                .bubble
                {
                    height: 62px;
                    width: 62px;

                    p {
                        width: 42px;

                        &.number {
                            font-size: 16px;
                            line-height: 18px;
                            padding-right: 0;
                        }
                    }
                }

            }
        }
    }

    .links
    {
        margin-top: steps(3);

        li
        {
            @include list-links;

            &:not(:last-child)
            {
                margin-bottom: steps(0.5);
            }

            @include for-phones
            {
                &:not(:last-child)
                {
                    margin-bottom: 0;
                }

                a
                {
                  font-size: 12px;
                }
            }
        }
    }

    a.button
    {
        @include for-phones
        {
            font-size: 12px;
            padding: 8px 25px;
        }
    }

    @include for-desktops
    {
        margin: 0 (-$gutter) steps(5.5);

        > ul
        {
            @include column-container($column-item: "li");
        }

        li.product
        {
            padding-left: $gutter * 2;
            padding-right: $gutter * 2;
            padding-bottom: steps(1);
            border-bottom: 0;
            margin: 0;

            &:not(:last-child)
            {
                border-right: 1px solid $color-border-normal;
            }
        }

        .title
        {
            margin-bottom: steps(4);
        }

        .action .button
        {
            width: 100%;
        }

        .links
        {
            margin-top: steps(4);
        }
    }
}

.featured-links
{
    margin-bottom: steps(5);

    &.violet .button.large
    {
        background-color: $color-background-violet;

        &:hover
        {
            background-color: $color-background-violet-darkest;
        }
    }

    &.ice-blue .button.large
    {
        background-color: $color-background-ice-blue;

        &:hover
        {
            background-color: $color-background-ice-blue-darkest;
        }
    }

    &.green .button.large
    {
        background-color: $color-background-green;

        &:hover
        {
            background-color: $color-background-green-darkest;
        }
    }

    &.yellow .button.large
    {
        background-color: $color-background-yellow;

        &:hover
        {
            background-color: $color-background-yellow-darkest;
        }
    }

    &.orange .button.large
    {
        background-color: $color-background-orange;

        &:hover
        {
            background-color: $color-background-orange-darkest;
        }
    }


    ul
    {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: center;
        margin-right: steps(-1.5);

        li
        {
            text-align: center;
            padding-bottom: steps(2);


            a.button.large
            {
                width: steps(28.5);
                height: 100%;
                padding: steps(2) steps(2.5);
                margin-right: steps(1.5);
            }
        }

        @include for-phones
        {
            margin-right: 0;

            li
            {
                flex-basis: 100%;
                padding-bottom: steps(1.5);

                a.button.large {
                    width: 100%;
                    padding: 12px;
                    margin-right: 0;
                }
            }
        }
    }

    @include for-at-most-small-tablets
    {
        margin: 0 steps(2) steps(5) steps(2);
    }
}

section.news
{
    @include column-container;

    > .heading
    {
        @include full-column;
        @include content-padding;
        @include optimal-measure;
        @include extra-large-heading;
    }

    .content.articles
    {
        @include two-thirds-column;
    }

    .content.banners
    {
        margin-top: steps(3);

        @include for-at-least-normal-tablets
        {
            margin-top: steps(4);
        }

        @include for-normal-tablets
        {
            @include column-container(".banner");
        }

        @include for-desktops
        {
            margin-top: steps(2);
        }
    }

    ul.news
    {
        @include for-at-least-normal-tablets
        {
            // reduce default margin as flexbox margins do not collapse
            margin-top: steps(2);
        }
    }

    .tools
    {
        margin-top: steps(2);

        @include for-at-least-normal-tablets
        {
            display: flex;
            justify-content: space-between;
            margin-top: steps(4);
        }
    }

    .links
    {
        @include list-links;

        margin-bottom: steps(1.5);

        @include for-at-least-normal-tablets
        {
            margin-top: steps(1);
            margin-bottom: 0;
        }
    }

    .feeds
    {
        display: flex;

        .title
        {
            @include small-text;

            align-self: center;

            max-width: 47%;
            margin-right: 28px;
            margin-bottom: 0;

            @include for-at-least-normal-tablets
            {
                align-self: auto;

                max-width: none;
                margin-top: steps(1);
                margin-right: steps(2);
            }
        }

        .profiles
        {
            @include inline-list;

            margin-top: steps(-0.5);

            li + li
            {
                margin-left: steps(1);
            }

            a
            {
                display: block;
                color: $color-text-normal;

                &:hover,
                #{$keyboard-only-focus}
                {
                    color: $color-background-inverted-normal;
                }
            }
        }
    }

    .banner
    {
        @include antialiasing;

        display: flex;
        flex-direction: column;
        height: steps(32);
        padding: steps(2.5) steps(3) steps(3);

        color: $color-text-inverted-lighter;

        @include for-at-least-normal-tablets
        {
            height: steps(36);
            padding: steps(3) steps(4) steps(4);
        }

        .heading
        {
            @include large-heading;

            color: inherit;
            font-size: 32px;
            line-height: steps(4);

            @include for-at-least-normal-tablets
            {
                line-height: steps(4);
            }
        }

        .action
        {
            margin-top: auto;
        }

        .button
        {
            display: block;
            font-size: 16px;
            font-weight: bold;

            padding: (steps(1) - 1px) (steps(2) - 1px);
            border: 3px solid;

            color: $color-brand-darkest;
            background: $color-background-lightest;

            &:hover,
            &:focus
            {
                color: $color-text-inverted-lighter;
                background: #737373;
                border: 3px solid #737373;
            }

            @include for-phones
            {
                font-size: 12px;
            }
        }
    }


    @include for-at-least-normal-tablets
    {
        ul.news .info
        {
            padding-right: steps(4);
        }
    }

    @include for-phones
    {
        > .heading
        {
            font-size: 18px;
        }

        .content.articles
        {
            li:nth-child(1)
            {
                border-top: none;
            }

            .description
            {
                font-size: 12px;
            }
        }

    }
}
