@import '../../environment';

main h1,
main h1 ~ .description,
section.statements
{
    @include content-padding;
    @include optimal-measure;
}

.indexes
{
    margin-bottom: steps(5) - 1px; // -1px to deal with last item's bottom border

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

        > li
        {
            @include one-quarter-column;
        }
    }

    li
    {
        @include content-padding;

        border-bottom: 1px solid $color-border-normal;
        margin: 0 0 (steps(4) - 1px);
    }

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

        margin-bottom: steps(1.5);

        &,
        .svg,
        .text
        {
            display: block;
        }

        .svg
        {
            margin-bottom: steps(3.5);

            color: $color-text-lighter;
            text-align: left;
        }

        .text
        {
            color: $color-text-darker;
        }
    }

    .value
    {
        @include baseline-box(41px, steps(5), -1.5px, 0, steps(1.5));

        display: block;

        font-weight: bold;
        color: $color-brand-darker;
        word-wrap: normal;
    }

    @include for-at-least-normal-tablets
    {
        margin: steps(5) (-$gutter) steps(7);

        li
        {
            display: flex;
            flex-direction: column;

            padding-top: steps(2);
            padding-left: $gutter * 2;
            padding-right: $gutter * 2;
            border: solid $color-border-normal;
            border-width: 1px 1px 0 0;
            margin-bottom: 0;

            // reset for first two items
            &:nth-child(-n+2)
            {
                padding-top: 0;
                border-top: 0;
            }
        }

        .label
        {
            @include baseline-box(22px, steps(3), -0.2px);

            flex-grow: 1;

            margin-bottom: steps(2);

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

    @include for-desktops
    {
        margin-top: steps(6);
        margin-bottom: steps(11);

        li
        {
            padding-top: 0;
            border-top: 0;

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

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

        .value
        {
            @include baseline-paddings(41px, steps(5));

            margin-bottom: steps(-2);
        }
    }
}

section.management
{
    margin-top: steps(4);

    .heading
    {
        @include content-padding;
        @include optimal-measure;
        @include large-heading;
    }

    ul
    {
        @include column-container;
    }

    li
    {
        @include one-quarter-column;
        @include content-padding;

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

    .position,
    .links
    {
        @include baseline-box(16px, steps(2.5), 0.5px);
    }

    .image
    {
        float: right;
        overflow: hidden;
        width: steps(6);
        padding: 0;
        border-radius: 50%;
        margin-top: steps(1);
        margin-bottom: steps(-1);
    }

    .name
    {
        @include large-text;

        float: left;
        max-width: 70%;
        margin-bottom: 0;

        color: $color-text-darker;
        word-wrap: normal;
    }

    .position
    {
        clear: both;
        margin-bottom: steps(0.5);
    }

    a.linkedin
    {
        @include icon("linkedin", $color-brand-normal);
    }

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

        li
        {
            margin: steps(2) 0 steps(3);
        }

        .image,
        .name
        {
            float: none;
        }

        .position,
        .links
        {
            @include baseline-box(16px, steps(3), 0.5px);
        }

        .image
        {
            width: steps(16);
            margin-top: 0;
            margin-bottom: steps(2.5);
        }

        .name
        {
            margin-bottom: steps(0.5);

            line-height: steps(3);
        }

        .position
        {
            clear: none;
            margin-bottom: steps(1);
        }
    }
}

section.statements
{
    margin-top: steps(6);

    .heading
    {
        @include normal-text(steps(2), steps(1));

        padding-left: steps(3);
        padding-right: steps(3);
        border: 1px solid $color-border-normal;
        margin-bottom: 0;

        background: $color-background-lighter;

        .js &
        {
            cursor: pointer;
        }

        @include for-at-least-tablets
        {
            @include baseline-paddings(18px, steps(3), steps(1), steps(2));

            display: flex;
            justify-content: space-between;
        }
    }

    .toggle
    {
        @include font-dimensions(16px, steps(3), 0.5px);

        display: block;
        margin-top: steps(0.5);

        color: $color-brand-normal;
        white-space: nowrap;

        html:not(.js) &
        {
            display: none;
        }

        > span:not(.normal)
        {
            display: none;
        }

        .normal
        {
            @include icon("chevron-down", $color-brand-normal);
        }

        .activated
        {
            @include icon("x", $color-brand-normal);
        }

        .normal,
        .activated
        {
            padding-left: steps(1.5);

            &::before
            {
                margin-right: 0;
                margin-left: steps(-2);
            }
        }

        @include for-at-least-tablets
        {
            margin-top: 0;
        }
    }

    .table-box
    {
        display: none;
        margin-top: 0;
    }

    &.open
    {
        .heading
        {
            border-bottom: 0;
        }

        .toggle > span
        {
            display: none;

            &.activated
            {
                display: inline;
            }
        }

        .table-box
        {
            display: block;
        }
    }

    @include for-at-least-tablets
    {
        td.data
        {
            width: 40%;

            &:last-child
            {
                width: 45%;
            }
        }
    }
}
