:root {
	--eden-green: #286117;
	--eden-yellow: #F2C03A;
    --max-viewport: 1400px;
    --header-height: 100px;
}

html, body {height:100%; scroll-behavior:smooth;}
* {box-sizing: border-box; outline: none;}
a, a:hover, button {text-decoration:none; cursor:pointer; color: inherit}
b {font-weight:700!important;} p {padding:10px 0;}
img {display: block; width: 100%; height: auto;}
body {font:300 13px/1.1 "Lato",sans-serif; overflow-x:hidden; margin:0; padding:0; background-color:#fff; position:relative; color: #222;}

.wrapper {width: min(100vw, var(--max-viewport)); margin: 0 auto; padding: 4em;}
.fixedBG {background-attachment: fixed;}
.hasBG {background-repeat: no-repeat; background-size: cover; background-position: center}
.toright {text-align: right;}
.toleft {text-align: left;}
.tocenter {text-align: center;}
.caps {text-transform: capitalize;}
.upper {text-transform: uppercase;}
.underlined {text-decoration: underline;}
.oblic {font-style: italic;}
.fn300 {font-weight: 300;}
.fn400 {font-weight: 400;}
.fn700 {font-weight: 700;}
.spaced1em {padding-top: 1em;}
.spaced2em {padding-top: 2em;}
.spaced3em {padding-top: 3em;}

.fonts-clamp-Bigger {font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem);}
.fonts-clamp-Big {font-size: clamp(1.3rem, 0.175rem + 3vw, 2.8rem);}
.fonts-clamp-Medium {font-size: clamp(0.8125rem, 0.2219rem + 1.575vw, 1.6rem);}
.fonts-clamp-Normal {font-size: clamp(1rem, 0.88rem + 0.48vw, 1.3rem);}

h1.section {margin-bottom: .6em}
.ellipsiser {-webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 10; line-clamp: 10; overflow: hidden; text-overflow: ellipsis; white-space: normal}
ul {padding: 1em 2em;
    li {padding: 4px 0; list-style-type: disc; list-style-position: outside;}
}
.para_header {display: grid; grid-template-columns: 1fr 2fr; gap: 2em;
    p {font-size: 1.1em;}
}

.content-subject h2 {color: var(--eden-green)}

form {
    margin: 12px 0;
    * {transition: all .2s ease-in-out}
    #toaster {display: none; width: 100%; padding: 12px 20px; margin: 12px 0; border-radius: 6px; font-weight: 700; font-size: 13px;}
    #toaster.error {background-color: #FDB4B4; color: #C00;}
    #toaster.info {background-color: #C1C2FB; color: #00008D;}

    .flexWrapper {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 12px;
    }
    input, select, textarea {background-color: #FFF; color: #555; padding: 4px 10px; border: 1px solid #888; border-radius: 6px}
    input:focus, select:focus, textarea:focus {border-color: var(--eden-yellow);}
    textarea {width: 100%; margin: 12px 0; resize: none; font: inherit; font-size: 13px;}
    button {background-color: var(--eden-yellow); color: #fff; padding: 8px 32px; border: none; border-radius: 6px; font-weight: 700;}
}

header {
    background-color: #FFF; 
    .wrapper {
        display: flex; height: var(--header-height); align-items: center; padding: 0 4em;
        .logo {width: min(60vw, 340px); margin-right: auto;}
        nav {display: flex; gap: 16px; transition: all .3s ease-in-out;
            a {font-size: 1.1em; font-weight: bold; flex-wrap: wrap; display: flex; align-self: center;
            color: #000; text-transform: capitalize;}
            .current {color: var(--eden-yellow);}
            #menu-home.current {display: none;}
        }
        #menu, #menu_quit {display: none; position: absolute; top: 30px; right: 30px;}
        #menu {position: fixed; padding: 2px 6px; border-radius: 4px; background-color: #FFFFFF80; z-index: 998;}
    }
}

#banner {background: var(--eden-green) url('/assets/icon-bg.png') left bottom no-repeat; color: #FFF; display: grid; place-content: center; padding: 2em; background-size: cover; height: min(50dvh, 300px);}

footer {
    display: grid; place-content: center; padding: 3em; text-align: center; gap: 1em;
    .footer_logo {width: min(60vw, 260px)}
}

#hero {
    height: calc(100svh - var(--header-height)); background-image: url('/assets/img/hero.jpg'); display: grid;
    .wrapper {
        align-self: end; margin-bottom: 4em; padding: 0 4em;
        #hero-content {
            padding: 3em; background-color: #00000050; backdrop-filter: blur(10px); color: #FFF; display: grid; gap: 1.8em;
            h1 {font-weight: 700;}
        }
    }
}

#about {
    background-image: url('/assets/arts/about_bottom.svg'); background-position: left bottom; background-repeat: repeat-x;
    .columns {column-count: 2; column-gap: 3em; margin-bottom: 6em;}
    .further {background-color: var(--eden-yellow); color: #FFF; padding: 8px 32px; font-size: .8em;}
}

#programs {
    background-color: #F3F3F3;
    #cards {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2em; margin-top: 4em;
        .card {
            background-color: #FFF; box-shadow: 0 0 8px #00000040;
            display: grid; grid-template-columns: 1fr 2fr; gap: 0;
            .text {padding: 14px 18px; display: flex; flex-direction: column;
                p {flex: 1; padding-bottom: 0; font-size: .9em;}
            }
            .figure {position: relative; background-size: cover;
                a {position: absolute; bottom: 10px; right: 10px; background-color: #FFF; color: #000; padding: 4px 24px;}
            }
        }
    }
}

#involved {
    height: 100dvh; background-image: url('/assets/arts/involved_top.png'), url('/assets/arts/involved_bottom.png'), url('/assets/img/involved.jpg'); background-position: top left, bottom left, center; background-size: auto, auto, cover; background-repeat: repeat-x, repeat-x, no-repeat; display: grid; place-content: center;
    .wrapper {
        padding: 4em; display: grid;; gap: 10px; color: #FFF;
        #involved-content {
            padding: 3em; background-color: #00000050; backdrop-filter: blur(10px); color: #FFF; display: grid; gap: 1.8em;
            h1 {font-weight: 700;}
        }
        a {padding: .5em 2.5em; background-color: #F2C03A80; backdrop-filter: blur(10px); width: fit-content;}
    }
}

#intouch {
    background-color: #FFF;
    #cols {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3em; margin-top: 4em; align-items: center;
        .item {display: grid; gap: 10px; grid-auto-rows: min-content;
            a {padding: 8px 3em; color: #FFF; background-color: var(--eden-green); width: fit-content}
        }
    }
}

#newsletter {
    background: var(--eden-green) url('/assets/icon-bg.png') left bottom no-repeat; color: #FFF; padding: 3em 0;
    .wrapper {
        display: grid; place-content: center; gap: 2em;
        #email {padding: 8px 3em;}
    }
}

#our-locations {
    background-color: var(--eden-yellow); color: #000; padding: 3em 0;
    .wrapper {
        display: grid; place-content: center; gap: 2em;
        .grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); place-content: center;}
        p {
            b {display: block; margin-bottom: .3em;}
        }
    }
}

@media (max-width: 430px) {
    #programs {
        #cards { grid-template-columns: 1fr;
            .card {
                display: grid; grid-template-columns: 1fr;
                .figure {height: 160px; order: -1;}
            }
        }
    }
}

@media (max-width: 600px) {
    .wrapper {padding: 2em !important;}
    #hero {
        .wrapper {
            margin-bottom: 2em; padding-bottom: 0 !important;
            #hero-content {
                padding: 2em !important
            }
        }
    }
    #about {
        .columns {column-count: 1}
    }
    #involved {
        .wrapper {
            #involved-content{padding: 2em !important;}
        }
    }
    form {
        .flexWrapper {
            grid-template-columns: 1fr !important;
        }
    }
}

@media (max-width: 900px) {
    header {
        #menu, #menu_quit {display: block !important;}
        nav {
            position: fixed; top: 0; right: -100vw; bottom: 0; height: 100svh; width: min(80vw, 400px); z-index: 999; background-color: #FFF; flex-direction: column; gap: 8px; place-content: center;}
        nav.shown {right: 0; box-shadow: 0 0 30px #00000060}
    }
    .para_header {
        display: grid; grid-template-columns: 1fr !important; gap: 1em !important;
        p {font-size: 1em !important;}
    }
    #intouch {
        #cols {
            gap: 2em; margin-top: 2em;
            .item {
                a {padding: 6px 2em; font-size: 1em;}
            }
        }
    }
}

@supports (-webkit-touch-callout: none) {
	section.fixedBG {background-attachment: scroll !important}
}