/* Footer call to action */

.footer-cta {
    overflow: hidden;
}

.footer-cta [class*="container"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.footer-cta .text {
    position: relative;
    z-index: 2;
    flex-grow: 1;
    flex-basis: 300px;
    max-width: var(--container-xs);
    padding-bottom: clamp(1rem, 5vw, 2rem);
}

.footer-cta .text .title {
    --x: -1%;
    line-height: 1;
    font-size: calc(var(--h1) * 1.125);
    margin-top: 0;
    margin-bottom: max(.25em, 1rem);
    text-transform: uppercase;
    transform: translateX(var(--x)) rotate(-3deg);
}

.footer-cta .text .title small {
    display: block;
    font-size: calc(var(--h3) * 1.25);
    text-transform: none;
    transform: translateX(var(--x));
}

@media(min-width: 1200px) {
    .footer-cta .text .title, .footer-cta .text .title small {
        --x: -3.5%;
    }
}

.footer-cta .text p {
    max-width: 28rem;
}

.footer-cta .text .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.footer-cta figure {
    flex-grow: 1;
    flex-basis: 360px;
    align-self: flex-end;
    max-width: var(--container-xs);
    position: relative;
}

.footer-cta figure img {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.footer-cta figure .barista {
    position: relative;
    z-index: 4;
    max-width: 50%;
    margin-left: 20%;
    margin-top: auto;
    margin-bottom: -1px;
}

.footer-cta figure .bagel {
    width: 40%;
    bottom: 45%;
    left: 40%;
    transform: rotate(35deg);
}

.footer-cta figure .berries {
    width: 50%;
    z-index: 5;
}

.footer-cta figure .coffeebeans {
    width: 80%;
    left: 5%;
}

.footer-cta figure .leafberries {
    width: 52%;
    left: auto;
    right: 2%;
    bottom: 15%;
    transform: rotate(15deg);
    z-index: 3;
}

.footer-cta figure .leaves {
    width: 35%;
    transform: rotate(30deg);
    left: 5%;
    bottom: 20%;
    z-index: 3;
}

.footer-cta figure .smoke {
    width: 120%;
    height: auto;
    left: -15%;
    z-index: 0;
    pointer-events: none;
}


/* Footer call to action animations */

.js .footer-cta figure img {
    opacity: 1;
    transition: 600ms cubic-bezier(.38, 1.4, .42, .95);
}

.js .footer-cta figure img.barista {
    transition: none;
}

.js .footer-cta figure:not(.inview) img:not(.barista), .js .footer-cta figure:not(.outview):not(.down) img:not(.barista) {
    opacity: .001;
}

.js .footer-cta figure .bagel {
    transition-delay: 300ms;
}

.js .footer-cta figure:not(.inview) .bagel, .js .footer-cta figure:not(.outview):not(.down) .bagel {
    transform: translate(-50%, 50%) rotate(-20deg);
}

.js .footer-cta figure .berries {
    transition-delay: 250ms;
}

.js .footer-cta figure:not(.inview) .berries, .js .footer-cta figure:not(.outview):not(.down) .berries {
    transform: translate(0, 100%) rotate(-20deg);
}

.js .footer-cta figure .coffeebeans {
    transition-delay: 200ms;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(.1, 1, .75, 1);
}

.js .footer-cta figure:not(.inview) .coffeebeans, .js .footer-cta figure:not(.outview):not(.down) .coffeebeans {
    transform: translate(0, 100%);
}

.js .footer-cta figure .leafberries {
    transition-delay: 300ms;
}

.js .footer-cta figure:not(.inview) .leafberries, .js .footer-cta figure:not(.outview):not(.down) .leafberries {
    transform: translate(-80%, 50%) rotate(-40deg);
}

.js .footer-cta figure .leaves {
    transition: 800ms 100ms cubic-bezier(.35, 1.31, .51, .96);
}

.js .footer-cta figure:not(.inview) .leaves, .js .footer-cta figure:not(.outview):not(.down) .leaves {
    transform: translate(100%, 35%) rotate(130deg);
}

.js .footer-cta figure .smoke {
    transition: 700ms 300ms linear;
}


/* Footer */

body:has(*.zc-widget-config) footer {
    padding-bottom: 60px;
}

footer [class*="container"] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 3rem 2rem;
    font-size: .9375rem;
}

footer [class*="col-"] {
    flex-grow: 1;
    max-width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

footer .col-3 {
    flex-grow: 1;
    flex-basis: 280px;
    max-width: calc(360px + 2rem);
    gap: 2rem;
}

footer hr {
    max-width: 4rem;
}

footer ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .25em;
}

footer a {
    display: inline-block;
    color: var(--beige);
    text-decoration: none;
}

footer a:hover {
    color: var(--salmon);
    text-decoration: underline;
}

footer a:active {
    transform: translateY(1px);
    opacity: .85;
}

footer li.current-menu-item>a, footer li.current-menu-parent>a {
    text-decoration: underline;
}

footer .nav-footer-1 {
    font-weight: var(--bold);
    font-size: var(--h4);
    gap: .75em;
}

footer .newsletter input[type="text"], footer .newsletter input[type="email"] {
    height: 2rem;
    padding: .25rem .5rem;
    border: 0;
    max-width: 18rem;
}

footer .newsletter *::-webkit-input-placeholder {
    font-size: var(--h6);
}

footer .newsletter *::-moz-placeholder {
    font-size: var(--h6);
}

footer .socials {
    flex-direction: row;
    gap: .5rem;
}

footer .socials svg {
    fill: currentColor;
    width: max(2rem, 40px);
    height: auto;
}

footer .nav-disclaimer {
    font-size: var(--h5);
    padding: 0 var(--site-padding) 2rem;
    margin-top: -2rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem 1.5rem;
}


/* Nav list (used in several places like the the faq single post and 404 page */

ul.nav-list, .nav-list ul {
    list-style: none;
    padding: 0;
}

.nav-list li {
    margin-bottom: .625em;
    padding-left: .25em;
}

.nav-list li a {
    padding-left: 1.25em;
    position: relative;
}

.nav-list li a:before {
    content: '';
    position: absolute;
    top: .4em;
    left: 0;
    display: inline-block;
    width: .6em;
    height: .6em;
    border-radius: 50%;
    box-shadow: inset 0 0 0 .2em currentColor;
}


/* 404 page specific */

.nav-404 {
    padding-block: 3rem;
}

.nav-404>[class*="container"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 2rem;
}

.nav-404>[class*="container"]>* {
    min-width: 12rem;
}