:root {
    /* Define the variable */
    --green: #92a99b;
    --gold: #c39b44;
    --purple: #9b4c5b;
    --green-rgba: rgba(146, 169, 155,0.16);
    --dark-green: #648470;
    --red: #e55a5a;

    /* for documentation purposes */
    --small-screen: 400px;
    --content-size: 860px;
}

/* Set up the box model */
* { box-sizing: border-box; }
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Quicksand', sans-serif;
    background-color: white;
    overflow-x: hidden;
}

/* general setup for picture / img */
picture > img {
    width: 100%;
    height: auto;     /* Maintain aspect ratio */
    display: block;   /* Remove inline spacing issues */
    object-fit: contain; /* (optional) ensures full image stays visible */
}

/* Define default backgrounds and other shapes */
.bg-green { background-color: var(--green); }
.bg-gold { background-color: var(--gold) }

/* hide elements */
.hidden { display: none !important; }

/* default text styles */
p > em { font-weight: 700; font-style: normal; }
a { color: var(--purple); }

/*
 * - the height of the topbar for normal screen is (125 / 860) * 100vw
 * - the height of the topbar for large screens is 125px
 * - the height of the topbar for small screens is 100px
 */
nav {

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    position: absolute;
    height: 40px;
    width: 43px;
    top: calc((125 / 860) * 100vw - 44px);
    left: unset;
    right: 0;
    z-index: 10;
    background: url('/assets/images/hamburger.png') center/cover no-repeat;
    cursor: pointer;

    @media (min-width: 860px) {
        top: 81px;
        right: calc((100vw - 860px) / 2);
    }

    @media (max-width: 400px) {
        height: 40px;
        top: 57px;
        left: 0;
        right: unset;
        background-image: url('/assets/images/hamburger-invers.png');
    }

    .menu {
        position: absolute;
        top:0;
        background-color: var(--dark-green);
        right: 0;
        padding-bottom: 30px;
    }

    .menu img {
        height: 40px;
        display: block;
    }

    .menu div:first-child {
        padding: 0;
        display: flex;
        justify-content: flex-end;
    }

    .menu div {
        padding: 0 35px 0 35px;
        text-align: right;
    }

    .menu a {
        word-break: keep-all;
        white-space: nowrap;
        padding: 4px 0;
        display: block;
        font-family: 'Quicksand', sans-serif;
        font-weight: 200;
        font-size: 1.125rem;
        text-decoration: none;
        color: white;
    }

    .menu a:hover {
        color: var(--gold);
        text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor;
    }

    /* When the screen is narrower than 400px, switch to mobile layout */
    @media (max-width: 400px) {
        .menu { left: 0; right: unset; }
        .menu div { text-align: left; }
        .menu div:first-child { justify-content: left; }
    }
}

/* controls the status of the menu */
nav > .menu { display: none; }
nav.open > .menu { display: block !important; }

nav.original {
    @media (max-width: 400px) {
        height: 40px;
        top: 170px;
        left: 0;
        right: unset;
        background-image: url('/assets/images/hamburger.png');
    }
}

/* Center the main content, can be used for all the blocks  */
.main-box {
    display: flex;
    justify-content: center;
    flex-direction: row;

    > :first-child {
        flex-grow: 1;
        flex-basis: 860px;
        max-width: 860px;
    }
}

/* Some main blocks have borders on the left and right sides */
.main-box.with-borders > :first-child {
    box-sizing: content-box;

    @media (min-width: 860px) {
        border-left: 4px solid white;
        border-right: 4px solid white;
    }
}

/* The header with the text and the image - this is a generic class */
.header {
    display: flex;
    background-color: white;
    gap: 4px;
    flex-direction: row;

    > :first-child { container-type: inline-size; flex: 0 0 calc((344 / 860) * 100%); }
    > :last-child { position: relative; flex: 1; display: flex; }

    /* When the screen is narrower than 400px, switch to mobile layout */
    @media (max-width: 400px) {
        gap: 0;
        flex-direction: column-reverse;
        > :first-child, > :last-child { flex: 1 1 100vw }
    }
}

/* the header with the logo - the logo must scale in proportion to the screen size */
.top.header {
    max-height: 125px;
    height: calc((125 / 860) * 100vw);

    > :last-child img {
        position: absolute;
        top: 0;
        left: calc(-0.5 * (625 / 501) * (236 / 860) * 100vw);
        height: calc((236 / 860) * 100vw);
        width: auto;
        z-index: 2;
        max-width: 307px;
        max-height: 236px;
    }

    @media (max-width: 400px) {
        flex-direction: row;
        height: 100px;
        > :first-child, > :last-child { flex: 0 0 50vw; }
        > :last-child img { height: 50vw; width: 66vw; left: -33vw; }
    }

    @media (min-width: 860px) {
        > :last-child img { width: 307px; height: 236px; left: -154px; }
    }
}

/* The header with the image of the lady in the garden - nb. element must include .header class  */
.image-header.header {

    > :first-child {
        container-type: inline-size;
        font-size: 4.6cqw;
        flex: 0 0  calc((344 / 860) * 100%);
        color: white;
        font-optical-sizing: auto;
        font-weight: 200;
        font-style: normal;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 10% 0;
    }

    /* this div contains the text */
    > :first-child > div {
        display: flex;
        text-align: center;
        justify-content: center;
    }

    > :last-child {
        position: relative;
        flex: 1;
        display: flex;
    }

    > :last-child > picture {
        display: block;
        width: 100%;
    }

    /* When the screen is narrower than 400px, switch to mobile layout */
    @media (max-width: 400px) {
        > :first-child, > :last-child { flex: 1 1 100vw; }
        > :first-child { font-size: 12vw; }
        > :last-child > picture { width: 100vw; height: 100vw; overflow: hidden; }
        > :last-child > picture > img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* fill frame */
            transform: translateY(-8.33vw)  translateX(-1.33vw) scale(1.4); /* 2x zoom */
            transform-origin: center;   /* zoom from center */
        }
    }

    /* When the screen is wider than 860px, the header text is fixed */
    @media (min-width: 860px) {
        > :first-child { font-size: 40px; }
    }

    .watermark {
        position: absolute;
        bottom: 0;
        right: 0;
        width: calc((344 / 860) * 50vw);
        height: auto;
        opacity: 0.75;
        display: flex;
    }

    .watermark > img { height: 100%; width: 100%; }

    @media (max-width: 400px) { .watermark { width: 33vw; }  }
    @media (min-width: 860px) { .watermark { width: 170px; }  }
}

/* the section and the content are meant for (small) pieces of text */
.text-section {
    padding-top: clamp(24px, 8vw, 48px);
    padding-bottom: clamp(24px, 8vw, 48px);

}

/* the content is meant for the main text of the page */
div.content {
    font-size: clamp(1.125rem, 0.9vw + 0.6rem, 1.25rem);
    font-weight: 300;
    font-style: normal;
    line-height: 1.5;

    p {
        padding-left: clamp(48px, 8vw, 80px);
        padding-right: clamp(48px, 8vw , 80px);
        text-align: center;
    }

    h2 , h1 {
        font-size: clamp(1.5rem, 0.9vw + 0.6rem, 1.75rem);
        padding-left: clamp(24px, 8vw, 32px);
        padding-right: clamp(24px, 8vw , 32px);
        font-weight: bold;
        text-align: center;
        word-break: normal;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        letter-spacing: 2px;
        margin: 0;
    }
}

/* the mission section (a bit more complex) */
.intermezzo {
    position: relative;
    padding-top: 25px;

    > :first-child {
        background:
            linear-gradient(white, white) left/50px 100% no-repeat,
            var(--green);
    }

    > :first-child > div {
        background:
            linear-gradient(white, white) left/50px 100% no-repeat,
            linear-gradient(to bottom, white 50%, var(--green) 50%);
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }

    > :first-child > div > h2 {
        font-family: 'MantaStyleScript', serif;
        font-size: clamp(3.25rem, 10vw, 4rem);
        transform: rotate(-6deg);
        font-weight: 400;
        text-align: right;
        padding-right: calc(320 / 860 * 20vw);
        margin: -15px 0 0;
        width: calc(540 / 860 * 100vw);
    }

    > :first-child > p {
        color: white;
        margin-top: -5px;
        container-type: inline-size;
        font-size: clamp(17px, 2.9cqw, 22px);
        line-height: 1.3;
        font-weight: 200;
        text-align: center;
        padding: 20px calc(320 / 860 * 17.5vw) 2.6cqw calc(320 / 860 * 97.5vw);
    }

    picture {
        position: absolute;
        bottom: calc((60 /860) * 100vw - 4px);
        left: 0;
        width: calc(260 / 860 * 100vw);
        display: block;
    }

    > :first-child > .purple {
        background: linear-gradient(to right, white 25%, var(--purple) 25%, var(--purple) 75%, white 75%);
        border-top: 4px solid white;
        height: calc((120 /860) * 100vw);
    }

    @media (min-width: 860px) {
        > :first-child > p { padding-left: 320px; }
        > :first-child > .purple { height: 120px; }
        picture { width: 260px; left: calc((100vw - 860px) /2); bottom: 60px; }
        picture > img { width: 260px; }
    }

    @media (max-width: 400px) {
        > :first-child { background:
                linear-gradient(white, white) left/30px 100% no-repeat,
                var(--green);
        }
        > :first-child > div {
            justify-content: left;
            background: linear-gradient(white, white) left/30px 100% no-repeat,
                        linear-gradient(to bottom, white 54%, var(--green) 54%);
        }
        > :first-child > div > h2 {
            padding: 0 0 0 20vw;
            width: unset;
            font-size: clamp(2.7rem, 14vw, 4.75rem);
            word-break: keep-all;
            white-space: nowrap;
        }

        > :first-child > .purple {
            background: linear-gradient(to right, white 38%, var(--purple) 38%, var(--purple) 95%, white 95%);
            height: calc((404 / 270) * 75vw );
        }

        > :first-child > p {
            padding: 20px 10vw 25vw calc(10vw + 30px);
            font-size: 20px;
        }

        picture { width: 75vw; left: 0; bottom: 20vw; }
        picture > img { width: 75vw; }
    }
}

/* a simple decorator */
.decorator {

    > div { display: flex; justify-content: center; }
    > div { img { width: 94px; flex: 0 0 94px; } }
    margin-bottom: clamp(-24px, -8vw, -48px);
}

/* this the join section with the calls for action */
.join {

    .head > h2 {
        font-family: 'MantaStyleScript', serif;
        font-size: clamp(3.25rem, 10vw, 4.75rem);
        transform: rotate(-6deg);
        font-weight: 400;
        margin: -2.6vw 0;
        text-align: center;
        width: 100%;
        padding: 0 10vw;
        line-height: 1.2;

        @media (min-width: 860px) {
            padding: 0 86px;
            margin: -23px 0;
        }

        @media (max-width: 460px) { padding: 0 15vw; }
        @media (max-width: 360px) { padding: 0 10vw; }
    }

    .content > :first-child { padding-top: 60px; }

    .content > p { padding: 0 5vw; }
}

.carousel {
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 100%;
    padding-bottom: 80px;

    .left-handle, .right-handle {
        flex: 0 0 calc(140 / 860 * 100vw);
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .left-handle > div { margin-right: calc(-20 / 860 * 100vw); }
    .right-handle > div { margin-left: calc(-20 / 860 * 100vw); }

    button {
        margin-top: calc(170px + 1em);
        cursor: pointer;
        height: 46px;
        border: none;
        background: black;
        color: white;
    }

    .slides {
        display: grid;
        grid-auto-flow: column;              /* fill columns left to right   */
        grid-auto-columns: minmax(0, 1fr);   /* each slide is one equal column */
        column-gap: 30px;
        grid-template-rows: auto auto auto;
    }

    .slides > div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .slides > div > img { padding: 40px 0 30px 0; width: 100px; }

    .slides > h3 {
        font-size: 1.17em; word-break: break-word; text-align: center; margin: 1em 0;
    }

    .slides p, .slides a  {
        font-size: clamp(1.125rem, 0.9vw + 0.6rem, 1.25rem);
        font-weight: 300;
        font-style: normal;
        line-height: 1.5;
        word-break: normal;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        text-align: center;
        margin: 0;
    }

    @media (min-width: 860px) {
        .left-handle, .right-handle { flex: 0 0 140px; }
        .left-handle > div { margin-right: 20px; }
        .right-handle > div { margin-left: 20px; }
    }
}

.green-header {
    > div { padding: 100px 20px 20px 20px; }
    > div > h2 {
        font-family: 'MantaStyleScript', serif;
        font-size: clamp(3.25rem, 10vw, 4.75rem);
        transform: rotate(-6deg);
        font-weight: 400;
        margin: -2.6vw 0;
        text-align: center;
        width: 100%;
        color: var(--green);
        line-height: 1.2;
    }
}

.form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    margin-top: -60px;

    form {
        max-width: 400px;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    form > input, form > textarea {
        margin-bottom: 12px;
        font-size: 1em;
        font-family: Quicksand, sans-serif;
        padding: 0.5em;
        max-width: 400px;
        width: 100%;
        resize: none;
    }

    form > textarea::placeholder, form > input::placeholder {
        color: gray;                /* Placeholder color */
        opacity: 1;                /* Ensure opacity for visibility */
        text-align: center;        /* Center placeholder text */
    }

    form > .button-container { display: flex; justify-content: flex-end; }
    form > .button-container > button {
        flex: 0 0 auto;
        border: 0;
        color: white;
        background: black;
        padding: 0.5em 1em;
        font-size: 1em;
        font-family: Quicksand, sans-serif;
    }

    input:focus, textarea:focus {
        border: 1px solid var(--green);
        box-shadow: 0 0 0 4px var(--green-rgba);
        outline: none;
    }

    form > textarea.error::placeholder, form > input.error::placeholder  {
        color: var(--red);
    }

    form > textarea.error, input.error {
        border: 1px solid var(--red);
    }

    .success-message {
        color: var(--dark-green);
        font-weight: bold;
        margin-top: 1em;
        padding: 2rem;
        border: 1px solid var(--dark-green);
    }

    .failed-message {
        color: var(--red);
        font-weight: bold;
        margin-top: 1em;
        padding: 2rem;
        border: 1px solid var(--red);
        cursor: pointer;
    }
}

footer {
    background: var(--green);
    height: 150px;
    margin-top: 60px;


    > div {
        display: flex;
        justify-content: center;
        align-items: center;
        color:white;
        flex-direction: column;
        font-size: 0.875em;
    }

    .copyright {
        display: flex;
        flex-direction: row;
        margin-bottom: 0.875em;
    }

    .copyright > div:first-child::after {
        content: '\2022';
        margin: 0 7px;
    }

    .bullet-list {
        display: flex;
        align-items: center;
        line-height: 16px;
        text-align: center;
    }

    .bullet-list span { margin: 0 5px; }

    .language-icon img {
        width: 16px;
        height: 16px;
        display: block;
    }

    .bullet-list span:not(:first-child):not(:last-child)::after {
        content: '\2022';
        margin-left: 5px;
    }

    .small { display: none; }
    .large { display: flex; }

    a { color: white; text-decoration: none;}

    @media (max-width: 400px) {
        .small { display: flex; }
        .large { display: none; }
        .copyright { flex-direction: column; }

        .copyright > div:first-child::after { content: ''; margin: 0; }
        .copyright > div { text-align: center;}
    }
}


.loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--dark-green);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% {transform: rotate(360deg); }
}

div.slides a {
    margin-top:4px !important;
    display: block;
}

/* "Test" ribbon in the top-right corner (test environments only) */
.test-ribbon {
    position: fixed;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    overflow: hidden;
    z-index: 1000;
    pointer-events: none;
    display: none;
}

.test-ribbon > div {
    position: absolute;
    top: 14px;
    right: -40px;
    width: 130px;
    transform: rotate(45deg);
    background: #c0392b;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}