@import "variables";
@import "mixins";

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.button {
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom-width: 0.2em;

    &.icon {
        padding-right: 3rem;
        background-size: 2.2rem;
        &.facebook {
    			padding-right: 2.2rem;
    		}
    }
}

.title-h1 {
    font-size: 2.1rem;
    line-height: normal;
}

.title-h2 {
    .title-h1;
	font-size: 1.3rem;
}

.wrapper {
    background-color: #fff;
    //box-shadow: 6px 3px 4px rgba(0, 0, 0, .2);
}

/*=====================
HEADER
=====================*/
header.main-header {
    padding: 1rem 6rem;

    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    z-index: 999;
    
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);

    h1.logo {
        img {
            width: 10rem;
            height: auto;

        }
    }

    > a.donate { display: none; }

    nav.main-nav {
        //Reset
        position: relative;
        right: auto; top: auto; left: auto; bottom: auto;
        width: auto;
        min-height: inherit;
        background: none;
        padding: 0;
        margin-right: 0.5em;

        > ul > li {
			padding-bottom: 0;
		}

		ul {
            li {
				margin-bottom: 0;
				&:first-child {
					margin-top: 0;
				}
            }
        }

        //
        ul {
            .flex-display();
    	    .flex-flow(row nowrap);
    		.align-items(flex-end);

            li {
                a {
                    color: @color-nav-blue;
                    font-size: 1.1rem;
                    font-weight: 500;
                    text-transform: uppercase;
                    text-decoration: none;
                    letter-spacing: 0.04em;
                    margin-left: 2rem;

                    &:hover {
                        color: @color-black;
                        border-bottom: @color-black 5px solid;
                        text-decoration: none;
                    }
                }

                &.current-menu-item,  &.current-menu-parent{
                    > a {
                        color: @color-green;
                        border-bottom: @color-green 5px solid;
                    }
                }

                &.menu-item-356 { //Donate button
                    background: transparent url("../img/icon-donate.svg") no-repeat right center;
        			background-size: 0.8em;
                    padding-right: 2.5rem;
                    > a {
                        background: none;
                        padding-right: 0;
                    }

                    &:hover {
                        background-image: url("../img/icon-donate-black.svg");

                        a {
                            color: @color-black;
                            border-bottom: @color-black 5px solid;
                        }
                    }

                    &.current_page_item {
                        background-image: url("../img/icon-donate-green.svg");
                        &:hover {
                            a {
                                color: @color-green;
                                border-bottom: @color-green 5px solid;
                            }
                        }
                    }

                }
            }

            li.menu-item-has-children {
                position: relative;
                overflow: hidden;

                ul.sub-menu {
                    visibility: hidden;
                    padding: 0.5rem 2rem;

                    // .flex-display();
            	    // .flex-flow(column wrap);
                    // .align-items(flex-start);

                    display: grid;
                    grid-auto-flow: column;
                    grid-template-rows: repeat(3, auto);
                    align-items: center;
                    grid-gap: 0.8rem;

                    //Sub-menu dimensions
                    // max-height: 13rem;
                    // min-width: 27rem;
                    // width: max-content; //Doesn't work on IE or Edge

                    position: absolute;
                    left: 2rem;
                    top: 3.5rem;
                    z-index: 999999;

                    background-color: @color-nav-blue-light;
                    border-bottom: @color-black 5px solid;

                    li {
                        padding: 0;
                        background: none;
                        min-width: 11rem;

                        // .flex(0 0 );

                        a {
                            color: @color-black;
                            font-size: 1.1rem;
                            font-weight: 400;
                            text-transform: none;
                            display: block;
                            // white-space: nowrap;
                            // max-width: 9.2em;
                            border-bottom: 0;
                            margin-left: 0;
                            line-height: 1.5em;

                            &:hover {
                                // font-weight: 600;
                                text-shadow: -0.05ex 0 #000, 0.05ex 0 #000;
                            }
                        }

                        &.current-menu-item:not(.menu-item-type-custom) {
                            > a {
                                color: @color-green;
                                text-shadow: -0.05ex 0 @color-green, 0.05ex 0 @color-green;
                                &:hover {
                                    color: @color-black;
                                    text-shadow: -0.05ex 0 #000, 0.05ex 0 #000;
                                }
                            }
                        }
                    }
                }

                &:hover {
                    overflow: visible;
                    ul.sub-menu {
                        visibility: visible;
                    }
                    > a {
                        color: @color-black;
                        border-bottom: @color-black 5px solid;
                    }
                }

                //Reset items from About Us anchor links
                &#menu-item-359 ul.sub-menu li.current-menu-item a {
                    color: inherit;
                    font-weight: inherit;
                }
            }
        }

        div.social-links,
        div.buttons {
            display: none;
        }
    }

    a.sw-tab {
        display: block;

        position: absolute;
        background-image: url("../img/icon-sw.svg"), url("../img/sustainble-website-tab-top.svg");
        background-position: 4.5rem 1.3rem, center center;
        background-size: 3rem, contain;
        background-repeat: no-repeat;

        font-weight: 500;
        font-size: 1rem;
        line-height: 1.2em;
        letter-spacing: 0.01em;

        width: 10rem;
        height: 10rem;

        top: 73px;

        right: 6rem;

        z-index: 999;

        text-decoration: none;

        > span {
            position: absolute;
            bottom: 2.4rem;
            left: 2rem;
            color: @color-green;
            text-align: center;
            text-transform: uppercase;
            span {
                font-size: 0.7rem;
                display: block;
            }
        }
    }
}


/*MAIN */
main {

    position: relative;
    top: 106px;

    header.cover {
		margin-bottom: 2rem;
        padding: 4rem @vw-spacing 0rem 6rem;
    }
}

/*=====================
FOOTER
=====================*/

footer.main-footer {
    //.flex-display();
	//.flex-flow(row nowrap);
    //.justify-content(center);
    //.align-items(center);
    text-align: left;

    margin: 5rem auto;
    
    //position: relative;

    a.back-to-top,
    hr {
        display: none;
    }

    * {
        margin-right: 1em;
    }
    div.content {
        .flex-display();
        .flex-flow(row nowrap);
        .justify-content(center);
        .align-items(center);
        a.button.donate,
        a.button.sitemap {
            display: initial;
        }
    }
    img {
		display: block;
    }

    // p.license, address.author {
    //     line-height: 1.3em;
    //     margin: 4rem @vw-spacing;
    // }
    // p.license {
    //
    // }
    //
    // address.author {
    //     font-style: normal;
    // }

}

.social-links {

	a {
		width: 3.5rem;
		height: 2.5rem;
        margin: 0 1em;

		img {
			width: 2.3em;
		}
    }

}

/*=====================
HOME
=====================*/

body.home {

	main {
		header.cover {

			h2 {
                font-size: 2.3rem;
                max-width: 780px;
			}

			
            a.sw-tab {
                display: none;
            }
        }

        > .wrap {
            .flex-display();
            .flex-flow(row nowrap);
        }

        section {
            > h1,
            > header h1,
            > header h2 {
                .title-h1;
            }
            > h2,
            > header h2 {
                .title-h2;
            }

            &.our-work {
                padding: @vw-spacing 0;
                min-width: 725px;

                header {
                    margin-left: @vw-spacing;
                    margin-bottom: 2rem;
                    padding-left: 3rem;
                }

                ul.index {
                    .flex-display();
                    .flex-flow(row nowrap);
                    margin-left: 4rem;

                    li {
                        background: none;
                        .flex(1);
                        .flex-flow(column nowrap);
                        .align-items(center);
                        padding-bottom: 1rem;
                        border-right: #ddd 1px solid;

                        > a {
            				font-size: 1.1rem;
                            text-align: center;
                            font-weight: 500;
                            margin: 0;
                            padding: 0 1rem;
                        }

                        > img {
                            .icon-size (6rem);
                            .flex( 0 0 6rem );
                            margin-bottom: 1rem;
                        }

                        &:last-of-type {
                            border: 0;
                        }
                    }

                    hr {
                        display: none;
                    }
                }
            }

            &.our-reach {
                margin: 0;
                margin-top: -12rem;
                padding-top: 12rem;
                padding-left: 2rem;
                width: 100%;

    	        header {
    				margin-bottom: 0;
                    h2 {
                        width: 50%;
                    }
                }

                figure {
    				right: auto; left: 4rem;

    				img {
    					height: 40rem;
    				}
    			}
            }

            &.events {
                padding-top: 2rem;
                margin-bottom: @vw-spacing;

                header h1 {
                    word-spacing: 30000px; //Force wrap
                }

                .wrap.grid {
                    display: grid;
                    grid-template-columns: 60% auto;
                    grid-template-rows: 1fr 1fr;
                    grid-gap: 2rem;
                }

                .event {
                    grid-column: 1;
                    grid-row: 1 /span 2;

                    h2 {
                        line-height: normal;
                        margin-bottom: 1em;
                    }

                    // &:first-of-type
                    &:not(.hide) {
                        padding-right: 2rem;
                        border-right: #ccc 1px solid;
                    }

                    &.hide {
                        display: block !important;
                        visibility: visible;
                        overflow: hidden;

                        grid-column: 2;
                        grid-row: auto / span 1;

                        h2 {
                            //Limit text to two lines
                            display: block;
                            text-overflow: ellipsis;
                            word-wrap: break-word;
                            overflow: hidden;
                            max-height: 3em;
                            line-height: 1.5em;
                        }

                        .img {
                			width: 13rem;
                			height: calc(13rem * 0.5625);
                        }

                        .row .col:last-of-type,
                        footer {
                            display: none;
                        }
                    }

                    address {
            			margin-bottom: 2em;
            		}
                }

                nav.prev-next {
                    // max-width: 60%;
                    grid-column: 1;
                    grid-row: 2;
                    align-self: end;

                    a {
                        padding: 0;
                        color: transparent;
                        width: 1em; height: 3rem;

                        &[rel="prev"] {
            				margin-right: 0.5em;
            			}
            			&[rel="next"] {
            				margin-left: 0.5em;
            			}
                    }
                }
            }

            &.co-create {
                .flex-display();
                .flex-flow(row wrap);
                padding: @vw-spacing;
                background-size: 35%;
                background-position: 70% center;

                position: relative;

                &:before {
                    content: "";
                    background-color: @color-blue;
                    position: absolute;
                    z-index: -1;
                    width: 100vw;
                    height: 100%;
                    left: calc(512px - 50vw);
                    top: 0;
                }

                h1 {
                    .title-h1;
                    width: 100%;
                    flex: 0 0 100%;
                    margin-bottom: 0.5em;

                }
                h2, p {
    	            .title-h2;
                    line-height: 1.5em;
                    padding-bottom: 0.5em;
    	        }
                p {
                    font-weight: 100;
                    letter-spacing: 0.03em;
                    line-height: 1.4em;
                }
                figure {
    	            margin: 0;

    				&.logo-ecoethic {
    					margin: 0.2em 0;

    					img {
    						width: 45%;
    					}
    				}
    				&.icon-donate {
                        margin: 0;
    					img {
    						width: 7rem;
    					}
    				}
    	        }

                span {
    				padding: 0 0.5em 0.3em 0.5em;
    				margin-bottom: 0;

                    a.button {
                        font-size: 0.7em;
                    }
    			}

                .col {
                    .flex(1);

                    &:first-of-type {
                        margin-right: 2rem;

                        //left: -10rem;
                        //position: relative;

                    }
                }
            }

            &.testimonials {
                display: grid;
                grid-template-columns: 60% auto;
                grid-template-rows: 1fr 1fr;
                grid-gap: 2rem;
                // align-items: center;
                // align-content: center;

    	        blockquote {
    	            font-size: 1.1rem;

                    grid-column: 1;
                    grid-row: 1 /span 2;

                    .content {
                        &:before {
                            top: -30px;
    	                    left: -50px;
    	                }
    	                &:after {
    	                    content: close-quote;
    	                    bottom: -50px;
    	                    right: 0;
    	                }
                    }

                    footer {
                        min-width: 30%;
                        padding-right: 2rem;
                        box-sizing: content-box;

    	                figure {
    	                    .icon-size (8rem);
                        }
                        div.col {
                            .flex-display();
                            .flex-flow(column nowrap);
                        }
                    }

                    &:not(.hide) {
                        padding-right: 2rem;
                        border-right: #fff 1px solid;
                    }

                    &.hide {
                        display: block !important;
                        visibility: visible;

                        grid-column: 2;
                        grid-row: auto / span 1;

                        .content {
                            display: none;
                        }
                        footer {
        	                .flex-flow(row nowrap);
                            .align-items(center);

                            figure.col {
                                .icon-size (6.5rem);
                                min-width: 6.5rem;
                                margin-right: 1em;
                            }
                            div.col {
                                cite {
                                    &.author {
                                        margin-bottom: 0;
                                    }
                                }
                            }
                        }
                    }

                }

                nav.prev-next {
                    // max-width: 60%;
                    grid-column: 1;
                    grid-row: -1;
                    align-self: end;

                    a {
                        padding: 0;
                        color: transparent;
                        width: 1em; height: 3rem;

                        &[rel="prev"] {
            				margin-right: 0.5em;
            			}
            			&[rel="next"] {
            				margin-left: 0.5em;
            			}
                    }
                }
            }

        }

        aside.cta {
            padding: @vw-spacing;

            h1 {
               .title-h1;
            }
            h2 {
                .title-h2;
                line-height: 1.5em;
            }

            &.eco-website {
                height: auto;
                background-position: 48% 30%;
                background-size: 30%;

                .flex-display();
       	        .flex-flow(row nowrap);
                .align-items(flex-start);
                .justify-content(space-between);

                .col {
                    max-width: 33%;
                    margin-bottom: 3rem;
                }

                h2 {
    				width: auto;
                    line-height: 1.4em;
    			}

                ul.col {
                   display: block;
                   list-style-type: none;
                   margin: 0; padding: 0;

                   li {
                       .title-h2;
                       line-height: 1.4em;
                       padding: 0 0 1em 3em;
                       background: transparent url("../img/icon-list-center.svg") left center no-repeat;
                       background-size: 2.5rem;

                       &:first-of-type {
                           background-image: url("../img/icon-list-top.svg");
                       }

                       &:last-of-type {
                           padding-bottom: 0;
                           background-image: url("../img/icon-list-bottom.svg");
                       }
                   }
                }
            }
        }
    }
}

/*=====================
PAGE
=====================*/

.page {

	header.main-header {
		h1.logo {
			img {
				width: 5rem;
			}
		}
    }

    main {
        .clearfix;

        header.cover {
            width: 100%;
            padding: 0;
            padding-top: 1rem;
            
			&:before {
				left: calc(512px - 50vw);
			}

            h1 {
                .title-h1;
                margin: 0 @vw-spacing -0.5rem;
            }
        }

        section.content {
            h2, h3, h4 {
                .title-h2;
                padding-bottom: 0.7em;
            }
            p, li {
                font-size: 1.2rem;
                line-height: 1.5em;
            }
            ul {
				li {
					margin-left: 1.5rem;
				}

				li::before  {
					left: -1.5rem;
				}
			}
            p.button {
                line-height: 1em;
            }
        }

        nav.tabs {
			&.sub {
				margin-bottom: @vh-spacing;
			}
		}
    }
}

.wrap.align-left {
    width: 60%;
    margin-bottom: 2rem;
}

hr {
	border-width: 1px;
	margin: auto;
}

.two-column > div {
    .flex-display();
    .flex-flow(row wrap);

    :not(.col),
    > h2 {
        .flex(0 0 100%);
    }

    .col {
        .flex(1 1 40%);

        &:first-of-type {
            padding-right: 1rem;
        }
        &:last-of-type {
            padding-left: 1rem;
        }

        figure {
            margin: 0;

            img {
                width: 100%;
                height: auto;
            }
        }
    }
}

ul.list-horizontal {
    .flex-display();
    .flex-flow(row wrap);

    > li {
        .flex(1);
    }

    &.two-col {
        > li {
            .flex(40%);
            &:nth-of-type(odd) {
                margin-right: 1em;
            }
        }
    }
}

.icon-pdf {
    figure {
        margin: 0.5em !important;
        a {
            img {
                width: 7rem;
                height: auto;
            }
        }
    }
}

/*=====================
PAGE ABOUT-US
=====================*/

.who-we-are > div {
    .flex-display();
    .flex-flow(row wrap);

    h2 {
        .flex(0 0 100%);
        .flex-order(0);
    }

    .col {
        .flex(1 1 50%);
        margin: 0;

        //Switch column order
        &:first-of-type {
            .flex-order(2);
        }
        &:last-of-type {
            .flex-order(1);
        }
    }

    figure {
        margin: 0;

        img {
            width: 22rem;
            height: auto;
        }
    }
}

.vision-mission > div {
    .flex-display();
    .flex-flow(row nowrap);
    margin: 2rem 0;

    .col {
        .flex(1 1 50%);
        //column widths
        &:first-of-type {
            .flex-basis(25%);
            padding-right: 2rem;
        }
    }
}

.h-icon {
	img {
		height: 5rem !important;
		width: 5rem !important;
	}
}

.inecc-box {
	margin: 2rem -@vw-spacing 3rem -@vw-spacing;
    padding-bottom: @vw-spacing;

    > div {
        //.flex-display();
        //.flex-flow(row wrap);

        h2 {
            .flex(0 0 100%);
            margin-bottom: 1em;
        }

        /*.col {
            .flex(1 1 50%);
            //column widths
            &:first-of-type {
                .flex-basis(25%);
                padding-right: 2rem;
            }
        }*/
    }
}

.team {
    margin: 2rem 0;
    > div {
        .flex-display();
        .flex-flow(row wrap);
    }

    h4 {
        .flex(0 0 100%);
    }

    .team-member { //columns
        .flex(0 0 50%);
        .align-items(flex-start);

        h5, h6 {
            font-size: 1.3rem;
            line-height: 1.5em;
        }
        p {
            font-size: 1.1rem !important;
        }
    }

    .has-text-align-right { //Button see-more container
        .flex(0 0 100%);
    }

	&.executive-committee {
		.team-member {

            figure {
                width: 7rem;
            }
			.wp-block-media-text__content {
                padding-left: 1.5rem;
			}
		}
	}
    &.general-body {
		.team-member {
            padding-right: 2rem;
        }
    }
}

.our-history {
    margin: 2rem 0;
    > div {
        .flex-display();
        .flex-flow(row wrap);
        h2 {
            .flex(0 0 100%);
            margin-bottom: 1em;
        }
        .col {
            .flex(1 1 50%);
            //column widths
            &:last-of-type {
                padding-left: 2rem;
            }
        }
    }
}

.history-block > div {
    .flex-display();
    .flex-flow(row wrap);
    .align-items(center);
    margin: 4rem 0;

    .col {
        .flex(1 1 60%);
    }

    figure.col {
        margin: 0;
        .flex(1 1 40%);
        padding-right: 2rem;

        // img {
        //     width: 20rem;
        //     height: auto;
        // }
    }
}

.our-history-phases {
    height: 25rem;
    overflow-y: scroll;
    overflow-x: hidden;
    margin: 0;
    border-bottom: @color-nav-blue-light 1rem solid;

	.phase {
		padding: 1.5rem;

		.header {
			font-size: 2rem;
            padding: 0;
            margin: 0;
		}
    }
    .prev-next {
		a {
			height: 3rem;
			top: 2rem;

			&[rel="prev"] {
				left: -0.5rem;
			}
			&[rel="next"] {
				right: -0.5rem;
			}
		}
	}
}

.sustainability {
    &.two-column > div {
        .col {
            figure {
                img {
                    width: 25rem;
                    padding-left: 3rem;
                }
            }
        }
    }
}

/*=====================
PAGE OUR-WORK
=====================*/

div.search-results-header {
    font-size: 1.3rem;
    line-height: 1.5em;
    padding: 1em ;
    margin-bottom: 1.5em;
}

body.page-template-page-our-work,
body.page-template-page-our-work-search {

	section.content {
        .justify-content(space-between);

		&.subpage {
			//Look like a tab
			border-top-width: 0.3rem;
			border-bottom-width: 0.3rem;

			header {
                margin-bottom: 3rem;
				h1, h2 {
					.title-h2;
                    margin-right: 60%;
				}

				img.icon {
					height: 2em;
					margin-right: 2rem;
				}
			}
		}
	}

    aside.content.parent {
		//Look like main content

		header {
			width: 100%;
            padding: 0;
            padding-top: 1rem;
            margin-bottom: 2rem;

			&:before {
				left: calc(512px - 50vw);
			}

			h3 {
				.title-h1;
				margin: 0 @vw-spacing -0.5rem;
			}
		}
        p {
            font-size: 1.2rem;
            line-height: 1.5em;
        }
	}

    //SEARCH + FILTER
	aside.search-filter {

        background-color: transparent;
        margin: 0;

        .flex-display();
    	.flex-flow(column nowrap);
        .flex(0 0 31%);

        .tabs {
            display: none;
        }

        button.button.close {
            display: none;
            top: 1rem;
            right: 2.5rem;
            &:after {
                zoom: 1.5;
            }
        }

		section.search, section.filter {
            display: block;
			padding: 0 1rem;
            background-color: transparent;
			font-size: 1.1rem;
			line-height: 1.7em;
            border: 1px solid rgba(@color-nav-blue, .5);
            margin-bottom: 2rem;

            h2 {
                border-width: 1px;
                color: rgba(@color-nav-blue, .5);
                padding: 1rem 0 .7rem;
			}

            form {
                fieldset {
                    .flex-flow(column wrap);

                    legend {
                        margin-bottom: 1rem;
                    }
                    label {
                        input {
                            &[type=radio] {
                                transform: scale(1);
                            }
                        }
                    }
                }
            }

            button.button {
                margin: 0.5rem 0;
                cursor: pointer;
            }

        }

        section.search {
            form {
                input[type=text] {
                    margin-bottom: 1.5rem;
                }
            }
        }

        .filter {
            order: 4;
        }

    }
}

body.page-template-page-our-work-search {

    section.content {

		&.subpage {
            .flex-display();
            .flex-flow(row nowrap);

            > .wrap {
                .flex(0 0 65%);
            }

            section.events {
                .event {
    				.img, time {
    					margin-left: 0;
    				}
    				time {
    					left: 0;
    				}
    			}
            }
            section.press {
                article {
                    h2 {
                        padding-bottom: 0;
                        margin-bottom: 0;
                    }
    				time {
    					font-size: 1.2rem;
    				}
    			}
            }
            section.publications {
                article {
    				figure {
                        height: 14.7rem;
                    }
                    time {
    					font-size: 1.2rem;
    				}
                    .button {
                        font-size: 1.2rem;
                    }
    			}
            }
        }
    }
}

/*TABS*/
nav.tabs {

	> a {
		font-size: 1.3rem;
        text-transform: uppercase;
        line-height: 1.2em;

		padding: 1rem;
		margin: 0 0.5rem 1rem 0.5rem;

		// .flex(0 0 ((100vw / 3) - (@vw-spacing * 2) - (0.5rem * 3) - 0.1rem) );
        .flex(1);

		span {
			border-bottom: @color-nav-blue 0.3rem solid;
			padding-bottom: 0.5em;
		}

		&.selected {
			color: white;
			padding-bottom: 3.1rem;
			margin-bottom: -0.2rem;
		}
	}

	&.sub {
		//When tabs are shown in the bottom
        > a {
			.flex(0 0 30%);


			img {
				width: 5.3rem;
                margin-right: 1em;
			}
        }
    }
}


/*=====================
TEMPLATE LIST EVENTS
=====================*/

section.events {
	.event {

		> h1,
		> h2 {
			font-size: 1.3rem;
            margin: 0;
		}

        .row {
			font-size: 1.1rem;
            > .col {
				.flex(0 1 auto);

                &:first-of-type {
                    min-width: 20rem;
                    margin-right: 2rem;
                }
			}
		}

        .img {
			width: 20rem;
			height: calc(20rem * 0.5625);

		}

        address {
            margin-bottom: 2em;
        }

    }
}

/*=====================
PAGE ECOETHIC
=====================*/

.newsletter-archive {
	.display_archive {
        margin-top: 0;
		.campaign {
            font-size: 1.2rem;
            padding: 0.5em 0;
			> a {

			}
		}
	}
}

/*=====================
PAGE CONTACT US
=====================*/

body.page-contact-us {
	section.content {
		h3 {
		}
	}
}

/*=====================
PAGE DONATE
=====================*/

body.page-donate {
	section.content {
		.cover.donate {
			margin: -2rem -@vw-spacing 2rem -@vw-spacing;
			h2 {
				font-size: 2.3rem;
                padding: 0 5em;
			}
			p {
				margin-bottom: 2rem;
			}
			figure {
				img {
                    width: 6rem;
                    height: auto;
                }
			}
		}

        .inecc-box > div {
            //.flex-flow(column wrap);
        }

		.faq {
			color: @color-nav-blue;
		}
	}
}

.inecc-dropdown {
	.block {
		h3:first-of-type { //Block header
			background-size: 2.2rem;
		}
	}
}

//PAGE SITEMAP
body.page-sitemap {
	section.content {

        nav.sitemap-nav {

            ul {

                li {

                    a {
                        font-size: 1.3rem;
                    }

                    &.menu-item-has-children {
                        ul.sub-menu {
                            li {
                                a {
                                    font-weight: 400;
                                }
                            }
                        }
                    }
                }
            }
        }

    }
}

// SIDEBAR
aside.sidebar {
    position: absolute;
    // background: red;
    left: 1024px; right: 0;
    top: 155px; bottom: 0;

    font-size: 1.2rem;
    line-height: 1em;

    .sb-post {
        max-width: 400px;
        margin: 0 auto;
        position: relative;
        img {
            width:100%;
        }
        .sb-post-content {
            position: absolute;
            width: 100%;
            z-index: 1;
            bottom: 4.5em;
            left: 0;
            text-align: center;
        }
        .wp-block-button {
            &:extend(.button);
        }
    }

    a.sb-menu-toggle {
        display: block;
        background: fade(#fff, 50%) url("../img/icon-menu-green.svg") no-repeat 0 0;
        background-size: 1.1rem;
        background-position: right;
        color: @color-nav-blue;
        text-decoration: none;
        font-size: 1.1rem;
        padding-right: 2rem;
        text-align: right;
        .open-menu {
            display: block;
        }
        .close-menu {
            display: none;
        }
        &.open {
            background-image:url("../img/icon-cross-green.svg");
            .close-menu {
                display: block;
            }
            .open-menu {
                display: none;
            }
        }
    }

    nav.sidebar-nav {
        margin: @vw-spacing;
         ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            &.open {
                display: none;
            }
            li {
 				margin-bottom: 0.2em;

 				a {
 					text-decoration: none;
 					text-transform: uppercase;
                    letter-spacing: 0.04em;
 					font-size: 1.1rem;
                    line-height: 1.5em;
                    color: @color-nav-blue;

 					&:hover {
 						text-decoration: none;
                        color: @color-black;
 					}
 				}

 				ul {
                     display: block;
 					padding-left: 1em;

 					li {
 						border: 0;

 						a {
 							text-transform: none;
 						}
 					}
 				}

 				&.menu-item-has-children {
                    ul.sub-menu {
                        margin-bottom: 1em;
                    }
 				}

 				&.menu-item-670 { //Donate link
 					> a {
 						background: transparent url("../img/icon-donate.svg") no-repeat right center;
 	        			background-size: contain;
 	                    padding-right: 1.5em;
 					}
                }

                &.current-menu-item, &.current-menu-parent {
                    > a {
                        color: @color-green;
                    }
                }
                &:first-child {
                    margin-top: 0.5em;
                    ul.sub-menu {
                        li, li.current-menu-item {
                            > a {
                                color: @color-nav-blue!important;
                            }
                        }
                    }
                }
 			}
         }

         > ul > li > a {
             font-weight: bold;
         }

         &.fixed {
             position: fixed;
             top: 0;
         }
    }

    a.back-to-top {
        position: absolute;
        font-size: 1rem;
        bottom: 20em;
        width: 100%;
    }
}

body.home {
    aside.sidebar {
        top: 834px;
    }
}

//
@media screen and (min-width: 1420px) {
    .wrapper {
        max-width: 1024px;
        margin: auto;
    }
    aside.sidebar {
        display: block;
    }
}
