/* Site-wide styles */

:root {
    --grw-green-dark: #0f6732;
    --grw-green-light: #699a2d;
    --grw-teal-dark: #00a4a0;
    --grw-teal-light: #7fc8c3;
    --grw-sand-dark: #b78016;
    --grw-sand-light: #fcc01a;
    --grw-maroon-dark: #9c1846;
    --grw-maroon-light: #eb6163;
    --grw-orange-dark: #b63c18;
    --grw-orange-light: #e78d00;
    --grw-beige: #f3f5eb;
    --grw-grey-dark: #333;
    interpolate-size: allow-keywords;
}

html {
    @media screen and (min-width: 576px) {
        font-size: 1.1rem;
    }
}

body {
    font-family: "filson-pro", sans-serif;
    font-weight: 300;
    line-height: 1.6;
}

@media (min-width: 1600px) {
    .container {
        max-width: 1520px;
    }
}

#content {
    overflow: hidden;

    &.info img {
        max-width: 100%;
    }
}

a {
    color: var(--grw-green-dark);

    &:hover {
        color: var(--grw-green-light);
        text-decoration: none;
    }
}

h1, h2, h3, h4 {
    font-weight: 700;
    color: var(--grw-green-dark);

    &:not(:first-child) {
        margin-top: 1.5rem;
    }
}

h1 {
    margin: 0;
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.2rem;
}

/* Fix for when using block list items in BS cols */

.row>.umb-block-list>* {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

section {
    padding: 4rem 0;

    &.green-dark {
        background-color: var(--grw-green-dark)
    }

    &.beige {
        background-color: var(--grw-beige)
    }
}

.hero {
    background-color: var(--grw-green-dark);
    background-size: cover;
    height: 300px;
    display: flex;
    align-items: center;
    text-shadow: 0 0 20px #000;
    color: #fff;

    @media screen and (min-width: 576px) {
        height: 500px;
    }

    h1 {
        color: #fff;
        font-size: 2.5rem;
        text-align: center;

        @media screen and (min-width: 576px) {
            font-size: 3rem;
        }
    }

    h1, .strapline, .introduction {
        @media screen and (max-width: 576px) {
            margin: 0 1rem;
        }
    }
}

.breadcrumb {
    margin: 1rem 0 0;
}

.introduction {
    margin: 0;
    text-align: center;

    @media screen and (min-width: 576px) {
        font-size: 1.2rem;
    }
}

/* Nav styles */

.navbar {
    background-color: var(--grw-beige);
    height: 6rem;
    border-bottom: 1px solid rgb(153 153 153 / 15%);
    box-shadow: 0 0 20px 0px rgb(153 153 153 / 30%);
    transition: height 0.2s, padding 0.2s;

    &.thin {
        height: 4rem;
        padding: 0.2rem;
    }

    button {
        border: 0;
        color: var(--grw-green-dark);
    }
}

.navbar .container, .navbar-brand, .navbar-brand img {
    height: 100%;
}

.nav-link {
    margin: .5rem;
    padding-bottom: .3rem;
    color: var(--grw-green-dark);
    font-weight: 500;

    @media screen and (min-width: 576px) {
        font-size: 0.8rem;
    }

    &:hover {
        color: var(--grw-green-light);
    }
}

.nav-item.active .nav-link {
    border-bottom: 2px solid var(--grw-green-dark);
}


@media screen and (max-width: 1199.98px) {
    .navbar-collapse {
        transition: height 0.2s;
        background-color: var(--grw-beige);
        padding: 0 1rem 1rem;
        position: absolute;
        top: 6rem;
        left: 0;
        width: 100vw;
    }

    .navbar.thin .navbar-collapse {
        top: 4rem;
    }
}

/* Hamburger icon extra functionality */

.navbar-toggler {
    padding: 0;

    &.collapsed .menu-close {
        display: none;
    }

    &:not(.collapsed) .menu-open {
        display: none;
    }
}

.menu-text {
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: bold;
    margin-top: 0.2rem;
}

/*Greenwood footer styles*/

.greenwood-footer {
    background-color: hsl(from var(--grw-green-dark) h s calc(l*0.5));
    font-size: 0.8rem;

    @media screen and (max-width: 576px) {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h2 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
        color: #fff;
        font-weight: 500;
    }

    a {
        color: #fff;
        text-decoration: none;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    .greenwood-logo {
        max-width: 300px;
    }

    .ecfpartner-logo {
        max-height: 120px;
    }

    .social-logos li {
        font-size: 1.5rem;
    }
}

/*Button styles*/

.button, .greenwoodcontactform .btn {
    color: #fff;
    border-radius: .5rem;
    padding: 0.4rem 1.3rem;
    display: inline-block;
    transition: background-color 0.3s;
    text-decoration: none;

    &:hover {
        color: #fff;
    }

    &.info {
        background-color: var(--grw-green-light);

        &:hover {
            background-color: hsl(from var(--grw-green-light) h s calc(l*1.3));
        }
    }

    &.cta, &.primary {
        background-color: var(--grw-sand-dark);

        &:hover {
            background-color: hsl(from var(--grw-sand-dark) h s calc(l*1.3));
        }
    }
}

/* Fade transitions */

.observer-fade {
    opacity: 0;
    transition: opacity 1s, transform 1s;

    &[data-slide-direction="left"] {
        transform: translateX(50%);
    }

    &[data-slide-direction="right"] {
        transform: translateX(-50%);
    }

    &[data-slide-direction="up"] {
        transform: translateY(50%);
    }

    &[data-slide-direction="down"] {
        transform: translateY(-50%);
    }

    &[data-fade-delay="0.25"] {
        transition-delay: 0.25s;
    }

    &[data-fade-delay="0.5"] {
        transition-delay: 0.5s;
    }

    &[data-fade-delay="0.75"] {
        transition-delay: 0.75s;
    }

    &[data-fade-delay="1"] {
        transition-delay: 1s;
    }

    &.feature-item:nth-child(odd) {
        transition-delay: 0.5s;
    }

    &.feature-item:nth-child(even) {
        transition-delay: 1s;
    }

    &.in {
        opacity: initial;
        transform: initial;
    }
}

/* Homepage */

.hero.homepage {
    height: 800px;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;

    @media screen and (min-width: 1200px) {
        background-size: contain;
    }

    .strapline {
        font-size: 2rem;
        font-weight: 700;
    }

    .introduction {
        text-align: initial;
    }
}

.home-cards {

    .row {
        --bs-gutter-y: 1.5rem;
    }

    .home-card {
        display: flex;
        flex-direction: column;

        .image {
            border-radius: 1rem 1rem 0 0;
            aspect-ratio: 1.5;
            background-size: cover;
            background-position: center;
        }

        .body {
            flex-grow: 1;
            background: var(--grw-green-dark);
            color: #fff;
            padding: 2rem;
            border-radius: 0 0 1rem 1rem;
            box-shadow: 0 8px 20px 0 #00000059;
        }

        h2 {
            color: #fff;
            margin-bottom: 1rem;
        }

        p {
            margin-bottom: 2rem;
        }

        &.feature {
            margin: 1.5rem 0 3rem;
            flex-direction: row;

            &.row {
                --bs-gutter-y: 0;
            }

            .body {
                padding: 3rem;
            }

            @media screen and (min-width: 992px) {

                .image {
                    border-radius: 1rem 0 0 1rem;
                }

                .body {
                    border-radius: 0 1rem 1rem 0;
                }
            }
        }

        a:hover .bg-image, a:focus .bg-image {
            transform: scale(1.2);
        }
    }
}

/* Landing pages */

.landing-tiles {

    .row {
        --bs-gutter-y: 1.5rem;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    .landing-tile {
        aspect-ratio: 1.3;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;
        overflow: hidden;
        border-radius: 1rem;
        box-shadow: 0 0 20px 0px #999;
        text-decoration: none;

        .bg-image {
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: transform .5s;

            a:hover &, a:focus & {
                transform: scale(1.2);
            }
        }

        .description {
            background-color: rgb(from var(--grw-green-dark) r g b / 0.8);
            color: #fff;
            text-shadow: 0 0 20px #000;
            text-align: center;
            z-index: 2;
            font-size: .9rem;

            p {
                margin: 0;
            }

            .title {
                font-size: 1.1rem;
                font-weight: 500;
                padding: 1rem;
            }

            .intro {
                height: 0;
                padding: 0 1rem;
                transition: all .5s;

                a:hover &, a:focus & {
                    height: auto;
                    padding-bottom: 1rem;
                }
            }
        }
    }
}

/* Infomation pages */

.float-left {
    float: left;
    margin: 0 2rem 1rem 0;
}

.float-right {
    float: right;
    margin: 0 0 1rem 2rem;
}

.callout {
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
    max-width: 400px;
    background-color: var(--grw-green-light);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 0 20px 0px #999;

    @media screen and (max-width: 767.98px) {
        margin-left: 0;
        margin-right: 0;
        max-width: initial;
    }
}

img {
    display: block;
}

.greenwoodmap {
    max-height: 600px;

    @media screen and (min-width: 992px) {
        max-height: 900px;
    }
}

.partnerlogos .container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ecflogo {
    width: 150px;
}

.ukgovlogo {
    width: 300px;
}

.bios {

    img {
        border-radius: 1rem;
        box-shadow: 0 0 20px 0px #999;

        &.float-left {
            rotate: -3deg;
            margin-right: 3rem;
        }

        &.float-right {
            rotate: 3deg;
        }
    }

    p:has(+img,+h2) {
        margin-bottom: 4rem;
    }
}

.timeline {

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        border-bottom: 4px dotted var(--grw-green-light);
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        overflow: hidden;
        opacity: 0;
        transition: opacity 1s;
        transition-delay: .25s;

        &.in {
            opacity: 1;
        }
    }

    & img {
        height: 1000px;
    }
}

.feature-panel {
    background: var(--grw-beige);

    h2 {
        margin-bottom: 1rem;
    }

    .row {
        align-items: center;
        margin: 0;
    }

    .feature-item {
        margin: 1rem 0;
    }

    .icon-wrapper {
        display: flex;
    }

    .icon {
        width: 100%;
    }

    .text-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .number {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 0;
        color: var(--grw-green-light);
    }

    .text {
        margin: 0;
    }

    .container > p {
        margin: 1rem 0 0;
    }
}

.arrow-items {
    --height: 5rem;
    background: #fafafa;

    h2 {
        margin-bottom: 2rem;
    }

    .arrow-item {
        position: relative;
        height: var(--height);
        background: var(--grw-beige);
        margin: 1.5rem 3rem 1.5rem calc(var(--height) / 2);
        padding: 1rem 1.5rem 1rem calc(var(--height) / 2 + 1.5rem);
        display: flex;
        align-items: center;

        &::after {
            content: "";
            width: 3rem;
            height: 100%;
            clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
            background: var(--grw-beige);
            position: absolute;
            top: 0;
            right: -3rem;
        }

        &:nth-of-type(even) .text {
            color: var(--grw-green-light);
        }
    }

    .icon {
        height: 100%;
        position: absolute;
        left: calc(var(--height) / 2 * -1);
        top: 0;
    }

    .text {
        font-weight: 500;
        margin: 0;
        color: var(--grw-green-dark);
    }
}

/* Forms */

.greenwoodcontactform.umbraco-forms-form {

    h4 {
        display: none;
    }

    .umbraco-forms-field {
        margin-bottom: 2rem;
    }

    input.text, textarea {
        max-width: 40rem !important;
        padding: .5rem;
        width: 100%;
        border-radius: .5rem;
        font-weight: 300;
    }

    fieldset {
        padding: 0;
        margin: 0;
    }

    legend {
        font-size: 1rem;
        margin: 0;
    }

    .field-validation-error {
        display: block;
        padding: 0;
    }

    .radiobuttonlist {
        float: initial;
    }

    .umbraco-forms-navigation {
        padding: 0;
    }
}