:root {
    --color1: white;
    --color2: #f9e6df;
    --color3: #463939;
    --color4: #cda98f;
    --color5: #cf7c00;
    --color6: #e3941c;
    --color7: #ecbe07;
    --header-content: var(--color3);
    --left-width: 46%;
    --right-width: calc(100% - var(--left-width));
    --headerHeight: 8rem;
}

.coupon svg {
    fill: var(--color6);
    height: 1.5rem;
    width: 1.5rem;
    margin: .25rem;
}

.header {
    --header-content: var(var(--color3));
    position: absolute;
    top: 0;
    height: var(--headerHeight);
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: var(--color2);
    z-index: 1051;
}
@media (max-width: 1140px) {
    :root {
        --headerHeight: 5rem;
        --left-width: 100%;
    }
    header.header {
        width: 100vw;
        position: fixed;
    }
}

html {
    width: 100vw;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    background: var(--color2, white);
    font-size: 14pt;
    font-family: "Work Sans", sans-serif;
    color: var(--color3);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}
h1, h2, h3, h4 ,h5, h6 {
    font-family: "Quicksand", sans-serif;
}
main {
    flex-grow: 1;
}
body:not(.index, .elegant-espresso) main {
    padding-top: var(--headerHeight);
}

.btn {
    position: relative;
    background: var(--color3);
    border-color: transparent;
    outline: none;
    border-radius: 2rem;
    padding: .5rem 1rem;
    min-width: 6rem;
    color: var(--color1);
    white-space: nowrap;
}
.btn::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    
    left: 1rem;
    width: calc(100% - 1.75rem);
    height: 1px;
    transition: .25s;
}
.btn:hover {
    box-shadow: none;
    color: var(--color1);
    border-color: transparent;
}
.btn:hover::after {
    box-shadow: 0 6px 5px black;
}
.btn.btn-primary {
    
    background: var(--color5);
    
}
.btn.btn-primary:hover {
    background: var(--color6);
}
.btn.btn-icon {
    padding-left: 2.5rem;
}
.btn.btn-icon svg {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    height: 1rem;
    width: 1rem;   
}
.btn.btn-icon path {
    fill: var(--color1);
}

.btn.loading,
form.loading button[type='submit'],
form.loading .btn-submit {
    color: transparent;
    pointer-events: none;
}

.btn.loading::before,
form.loading button[type='submit']::before,
form.loading .btn-submit::before {
    transition: 0;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1rem;
    width: 1rem;

    border-top: 2px solid var(--color2);
    border-right: 2px solid transparent;
    border-bottom: none;
    border-left: 2px solid var(--color2);
    border-radius: 50%;

    animation-name: loading;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    z-index: 1;
}

.form-message {
    border-bottom: 2px solid var(--color3);
    margin-bottom: 2rem;
}
.form-message.success {
    font-weight: bold;
    color: #076a07;
    border-color: #076a07;
}
.form-message.error {
    font-weight: bold;
    color: #b60000;
    border-color: #b60000;
}
.form-message li {
    font-weight: 400;
}

@keyframes loading {
    from { transform: translate(-50%, -50%) rotate(0) }
    to { transform: translate(-50%, -50%) rotate(360deg) }
}


.nav-links ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    height: 100%;
    list-style: none;
}
.nav-links ul a {
    position: relative;
    text-decoration: none;
    font-size: 12pt;
    color: var(--header-content);
    margin-left: 1.5rem;
}
.nav-links ul a::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -4px;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--header-content);
    transition: .25s
}
.nav-links ul a:hover {
    color: var(--header-content);
}
.nav-links ul a:hover::after {
    width: 100%;
}


@media (min-width: 1140px) {
    body.index header,
    body.elegant-espresso header {
        --header-content: var(--color2);
        background: transparent;
    }
}

.header .brand {
    position: relative;
    width: var(--left-width);
    height: 100%;
    color: var(--color1)
}
.header #ZELogo {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: 65px;
    fill: var(--color3);
    transition: .25s;
    width: unset;
}
.header .nav-links {
    width: var(--right-width);
    height: 100%;
}
body:not(.index) header .nav-links {
    width: 70%;
}
body:not(.index) header .brand {
    width: 30%;
}
/* .scrolling .header #ZELogo {
    height: calc(100% - 1rem);
    top: 50%;
    left: 1rem;
    transform: translate(0, -50%);
} */

.hero {
    position: relative;
    height: 50vh;
    width: 100vw;
    overflow: hidden;
}
.hero figure {
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
}
/* .hero figure::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    height: 50%;
    width: 100%;
    background: transparent;
    background: linear-gradient(0deg, black 0%, transparent 100%);
} */
.hero figure img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
}
body:not(.index) .hero figure img {
    object-fit: cover;
}
.hero .title {
    transform: translateY(-100%);
    padding-bottom: 1rem;
    color: var(--color2);
}
.index .hero {
    height: 100vh;
}

.hero .graphics {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.hero #coffee_banner {
    position: absolute;
    bottom: 4rem;
    right: 0;
    transform: translateX(50%);
    width: 12rem;
    z-index: 10;
}
.hero #coffee_time {
    position: absolute;
    fill: var(--color3);
    height: 25vh;
    bottom: 0;
    left: 2rem;
    opacity: .5;
}
.hero #coffee_plant {
    position: absolute;
    bottom: -6rem;
    right: -2rem;
    width: 21rem;
    rotate: 65deg;
    opacity: .5;
}
.hero #coffee_cup {
    position: absolute;
    top: 8rem;
    left: 2rem;
    transform: translateX(-50%);
    rotate: 20deg;
    height: 18rem;
    opacity: .5;
}
@media (max-width: 1140px) {
    .hero #coffee_plant {
        right: -12rem;
        opacity: .25;
    }
    .hero #coffee_banner {
        display: none;
    }
    .hero #coffee_time {
        opacity: .25;
    }
    .hero #coffee_cup {
        opacity: .25;
    }
}
.hero h1 {
    font-weight: bold;
    font-size: 34pt;
}
.hero .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42rem;
    max-width: calc(100% - 2rem);
}
.hero .right-panel, .hero .left-panel {
    width: var(--left-width);
    position: relative;
    height: 100%;
}
.hero .right-panel {
    width: var(--right-width);
    background: var(--color3, brown);
    color: var(--color2, white);
}

.hero .splash-image {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    transform: translate(-50%, 0);
    height: calc(100vh - var(--headerHeight));
    margin: 0;
}
.splash-image img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.intro-panel {
    position: relative;
    text-align: center;
    padding: 2rem;
    background: var(--color3);
    color: var(--color2);
}
.intro-panel::before {
    content: "";
    display: block;
    position: absolute;
    top: 4.5rem;
    left: 2rem;
    height: calc(100% - 6.5rem);
    width: calc(100% - 4rem);
    outline: 2px solid var(--color2);
}
.intro-panel:nth-child(2) {
    background: var(--color4);
}
.intro-panel h2 {
    position: relative;
    font-weight: bold;
    background: var(--color3);
    padding: .25rem 2rem 1rem 2rem;
    width: fit-content;
    margin: 0 auto;
    z-index: 1;
}
.intro-panel:nth-child(2) h2 {
    background: var(--color4);
}

.item-card {
    width: 100%;
    min-height: 12rem;
    background: var(--color4);
    overflow: hidden;
    border-radius: 1rem;
    height: 100%;
}
.item-card figure {
    position: relative;
    width: 100%;
    height: 16rem;
    background: var(--color3);
}
.item-card figure img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.item-card .item-header {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
}
.item-card .title {
    font-weight: bold;
    font-family: "Quicksand", sans-serif;
}
.item-card .item-description {
    padding: 0 1rem 1rem 1rem;
}
.item-card .item-description p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Number of lines to show */
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

.gallery-image {
    position: relative;
    width: 100%;
    aspect-ratio: 5/2;
    margin: 1rem 0;
    overflow: hidden;
}
.gallery-image img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.gallery-grid-modal .modal-content {
    height: fit-content;
    width: fit-content;
    max-height: 90vh;
    max-width: 90vw;
    background: black;
    border-radius: 1rem;
    margin: auto;
    overflow: hidden;
}
.gallery-grid-modal figure {
    position: relative;
    height: 100%;
    width: 100%;
    max-height: 90vh;
    max-width: 90vw;
    margin: 0;
}
.gallery-grid-modal img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
}
.gallery-grid figure {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    border: 2px solid var(--color3);
    border-radius: 1rem;
    overflow: hidden;
    transition: .5s;
}
.gallery-grid figure:hover {
    cursor: pointer;
    box-shadow: 0 8px 8px #00000050;
}
.gallery-grid img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.font-lg {
    font-size: 18pt;
}

.flex-grow {
    flex-grow: 1;
}

footer#footer {
    min-height: 18rem;
    position: relative;
    height: fit-content;
    padding: 3rem 0;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    background: var(--color4);
}
.map-box {
    border-radius: 1rem;
    width: 100%;
    min-height: 18rem;
}
footer .nav-links ul {
    justify-content: start;
}
footer .nav-links .contact,
footer .nav-links .order {
    display: none;
}
footer .logo {
    width: 6rem !important;
    fill:var(--color3);
}
@media (max-width: 768px) {
    footer#footer {
        padding-bottom: 8rem;
    }
}

form {
    padding-bottom: 4rem
}
.form-input {
    display: flex;
    flex-direction: column;
}
.form-input:not(:first-child) {
    margin-top: 1rem;
}
.form-input label {
    margin-bottom: .5rem;
}
.form-input input,
.form-input textarea {
    border: none;
    border-bottom: 2px solid var(--color3);
    outline: none;
    box-shadow: none;
    padding: .25rem .25rem .25rem .5rem;
    border-radius: 4px 4px 0 0;
    transition: .25s;
}

.form-input input:focus,
.form-input textarea:focus {
    box-shadow: 0 0 4px #00000050;
}

.form-input textarea {
    min-height: 12rem;
    max-height: 26rem;
}

.elegant-espresso {
    --color2: white;
    --color5: var(--color7);
}
.elegant-espresso .btn.btn-primary {
    border-radius: 8px;
    color: var(--color3);
}
.elegant-espresso .btn.btn-primary:hover {
    color: var(--color2);
}

.elegant-espresso main {
    padding-top: 0 !important;
}
.elegant-espresso .hero {
    height: 100vh;
    box-shadow: inset 0 0 8rem black;
}
.elegant-espresso .hero .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@media (min-width: 1140px) {
    .elegant-espresso header .brand #ZELogo {
        fill: var(--color2);
    }
}
.ee-font {
    font-family: "Dancing Script", cursive;
}
.elegant-espresso h1 {
    font-weight: 200;
    position: relative;
    width: fit-content;
    margin: auto;
    padding-bottom: 1rem;
    margin-bottom: 4rem;
    text-shadow: 0 0 8px black;
}

.elegant-espresso .hero .ee-font {
    color: var(--color7);
    font-size: 120pt;
}
.elegant-espresso .hero span {
    position: absolute;
    bottom: 0;
    left: 0;
    font-weight: 200;
    font-size: 28pt;
    color: white;
}
.elegant-espresso .hero span.ex {
    left: unset;
    right: 0;
}

.vignette {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #00000060;
}
.trailer-content figure,
.ee-content figure {
    width: 30rem;
    max-width: 100%;
    aspect-ratio: 5/6;
    overflow: hidden;
    border-radius: 8px;
}
@media (max-width: 768px) {
    .trailer-content figure,
    .ee-content figure {
        margin: 2rem auto !important;
    }
    .elegant-espresso h1 {
        padding-bottom: .05rem;
    }
    .elegant-espresso h1 .ee-font {
        font-size: 68pt !important;
    }
    .elegant-espresso .hero span {
        font-size: 14pt;
    }
}
@media (min-width: 768px) {
    
    .float-right {
        float: right;
    }
    .float-left {
        float: left;
    }
}

.trailer-content figure img,
.ee-content figure img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.inner-container {
    height: fit-content;
}

.trailer .hero .title {
    text-shadow: 0 0 4px black;
    color: white;
}

#mobileToggle {
    height: var(--headerHeight);
    width: var(--headerHeight);
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 1051;
}

#mobileToggle::after,
#mobileToggle::before {
    content: "";
    display: block;
    position: absolute;
    height: 6px;
    width: 2rem;
    background: var(--color3);
    border-radius: 2px;
    top: calc(50% - 6px);
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .25s;
}
#mobileToggle::before {
    top: calc(50% + 6px);
}
.mobile-menu-toggled #mobileToggle::after,
.mobile-menu-toggled #mobileToggle::before {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.mobile-menu-toggled #mobileToggle::before {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#mobileNav .offcanvas-header {
    background: var(--color2);
    padding-top: var(--headerHeight);
}
#mobileNav .offcanvas-body {
    background: var(--color2);
    color: black;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

#mobileNav nav nav {
    height: fit-content;
}
#mobileNav nav ul {
    flex-direction: column;
    justify-content: start;
    height: fit-content;
}
#mobileNav nav li {
    margin: 0 auto 3rem auto;
}

.one-done-link {
    position: relative;
    color: white;
    font-size: 10pt;
    text-decoration: none;
    opacity: .8;
}
.one-done-link::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    height: 2px;
    width: 0;
    background: white;
    transition: .25s;
}
.one-done-link:hover::after {
    width: calc(100% - 4px);
}

.one-done-link:hover {
    opacity: 1;
    color: white;
}