/*
Theme Name: Ballie Ballerson
Theme URI: https://wordpress.org/themes/twentytwentythree
Author: SHIFT
Author URI: https://www.weareshift.agency
Description: Ballies latest theme, based on Twenty Twenty Three.
Requires at least: 6.1
Tested up to: 6.1
Requires PHP: 5.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: BallieBallerson
Template: twentytwentythree
*/

:root {
    --grid-desktop-vertical-spacing:30px;
    --grid-desktop-horizontal-spacing:30px;
    --grid-mobile-vertial-spacing:15px;
    --grid-mobile-horizontal-spacing:15px;

    --gridhelper-horizontal: var(--grid-desktop-horizontal-spacing);
    --gridhelper-vertical: var(--grid-desktop-vertical-spacing);

    --gh-h: var(--gridhelper-horizontal);
    --gh-v: var(--gridhelper-vertical);
}

@media screen and (max-width: 1180px) {
    :root {
        --gridhelper-horizontal:var(--grid-mobile-horizontal-spacing);
        --gridhelper-vertical:var(--grid-mobile-vertial-spacing);
    }
}

@media screen and (max-width: 1180px) {
    h1, h2, h3 {
        text-align: center;
    }
}

.is-hidden {
    display:none;
}

body, html { 
    scrollbar-gutter: stable;
}

::-webkit-scrollbar {
    z-index: 0;
    width: 14px;
    background-color: transparent;
}
  
::-webkit-scrollbar-thumb {
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 999px;
    background-color: var(--wp--preset--color--ballie-pink);
}


h0, h1, h2, h3, h4, h5, h6, h7,
.h0, .h1, .h2, .h3, .h4, .h5, .h6, .h7 {
    margin:0;
    text-transform: lowercase;
    text-shadow: 0px -0.2rem 0px var(--wp--preset--color--ballie-pink);
}

section {
    width:100%;
    display:flex;
    flex-direction: row;
    justify-content: center;
    padding-left:calc(var(--gh-h) * 2.7);
    padding-right:calc(var(--gh-h) * 2.7);
    padding-bottom:calc(var(--gh-v) * 2.7);

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box;
}

section .container {
    display:flex;
    flex-direction: row;
    justify-content: center;
    width:100%;
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;

    padding-left:calc(var(--gh-h) * 2.7);
    padding-right:calc(var(--gh-h) * 2.7);

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box;
}

section .container .column {
    display:flex;
    flex-direction: column;
    width:100%;
    
    padding-top:var(--gh-v);
    padding-bottom: var(--gh-v);
    padding-left: var(--gh-h);
    padding-right: var(--gh-h);
    gap:var(--gh-v);

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box;
}

section .container.text-right {
    flex-direction: row-reverse;
}

.image-double {
    aspect-ratio: 1/1;
    height: auto;
    position: sticky;
    top: 130px;
}

.image-double .image-circle {
    position: absolute;
    width: 74%;
    height: auto;
    aspect-ratio: 1/1;
    left: 50%;
    top: 50%;

    transform: translate(-67%, -67%);
    user-select: none;
}

.image-double .image-circle:last-child {
    transform:translate(-33%, -33%);
}

.image-double .image-circle img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    object-fit: cover;
}

.image-double.animate .image-circle img {
    transition: all 1s ease-in-out;
    transform: translateY(300px) rotate(85deg) scale3d(0.5, 0.5, 0.5);
    opacity: 0.5;
}

.image-double.animate .image-circle:last-child img {
    transition-delay: 0.25s;
}

.image-double.animate.in-view .image-circle img {
    transform:translateX(0px) rotate(0deg);
    opacity:1;
}

.is-style-ballie-default {
    color:var(--wp--preset--color--ballie-pink);
    width: 100% !important;
    max-width:calc(1280px - (var(--gh-h) * 5.4)) !important;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:calc(var(--gh-v) * 2.7);
}

@media screen and (max-width: 1280px) {
    .is-style-ballie-default {
        max-width:100% !important;
        margin-left:calc(var(--gh-h) * 2.7) !important;
        margin-right:calc(var(--gh-h) * 2.7) !important;
    }
}


.is-style-ballie-primary-button {
    font-family: Nanami;
    font-weight:500;
    background-color: var(--wp--preset--color--ballie-pink);
    border: 3px solid var(--wp--preset--color--ballie-pink);
}

.is-style-ballie-primary-button-thin {
    font-family: Nanami;
    font-weight:500;
    background-color: transparent;
    border: 3px solid var(--wp--preset--color--ballie-pink);
}

.is-style-ballie-secondary-button {
    font-family: Nanami;
    font-weight:500;
    color: var(--wp--preset--color--ballie-black);
    background-color: var(--wp--preset--color--ballie-white);
    border: 3px solid var(--wp--preset--color--ballie-white);
}

.is-style-ballie-secondary-button-thin {
    font-family: Nanami;
    font-weight:500;
    background-color: transparent;
    border: 3px solid var(--wp--preset--color--ballie-white);
}

.is-style-ballie-primary-button > div,
.is-style-ballie-primary-button-thin > div,
.is-style-ballie-secondary-button > div,
.is-style-ballie-secondary-button-thin > div,
.is-style-ballie-primary-button a,
.is-style-ballie-primary-button-thin a,
.is-style-ballie-secondary-button a,
.is-style-ballie-secondary-button-thin a {
    border:none !important;
    padding: 16px 8px !important;
}

.menu-item-title {
    display: flex;
}

.menu-item-title > span {
    display: flex;
}

.menu-item-title > span:first-child {
    flex-grow: 1;
}

.menu-item-title > span:first-child:after {
    flex-grow: 1;
    content: '';
    border-bottom: 2px solid #FF00B8;
    border-style: none none dashed none;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

.menu-item-ingredients {
    opacity: 0.5;
}

.text-block {
    width:100%;
}

ballie-socials {
    display: flex;
    justify-content: center;
    gap: calc(var(--gh-h)/2);
}

.social-icon {
    background-color: var(--wp--preset--color--ballie-pink);
    display: inline-flex;
    width: 80px;
    aspect-ratio: 1/1;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}
.social-icon > div {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 70%;
    aspect-ratio: 1/1;
}

.icon-tiktok {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHNoYXBlLXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIiB0ZXh0LXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIiBpbWFnZS1yZW5kZXJpbmc9Im9wdGltaXplUXVhbGl0eSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHZpZXdCb3g9IjAgMCA0NDkuNDUgNTE1LjM4Ij48cGF0aCBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0zODIuMzEgMTAzLjNjLTI3Ljc2LTE4LjEtNDcuNzktNDcuMDctNTQuMDQtODAuODItMS4zNS03LjI5LTIuMS0xNC44LTIuMS0yMi40OGgtODguNmwtLjE1IDM1NS4wOWMtMS40OCAzOS43Ny0zNC4yMSA3MS42OC03NC4zMyA3MS42OC0xMi40NyAwLTI0LjIxLTMuMTEtMzQuNTUtOC41Ni0yMy43MS0xMi40Ny0zOS45NC0zNy4zMi0zOS45NC02NS45MSAwLTQxLjA3IDMzLjQyLTc0LjQ5IDc0LjQ4LTc0LjQ5IDcuNjcgMCAxNS4wMiAxLjI3IDIxLjk3IDMuNDRWMTkwLjhjLTcuMi0uOTktMTQuNTEtMS41OS0yMS45Ny0xLjU5QzczLjE2IDE4OS4yMSAwIDI2Mi4zNiAwIDM1Mi4zYzAgNTUuMTcgMjcuNTYgMTA0IDY5LjYzIDEzMy41MiAyNi40OCAxOC42MSA1OC43MSAyOS41NiA5My40NiAyOS41NiA4OS45MyAwIDE2My4wOC03My4xNiAxNjMuMDgtMTYzLjA4VjE3Mi4yM2MzNC43NSAyNC45NCA3Ny4zMyAzOS42NCAxMjMuMjggMzkuNjR2LTg4LjYxYy0yNC43NSAwLTQ3LjgtNy4zNS02Ny4xNC0xOS45NnoiLz48L3N2Zz4=");
}

.icon-facebook {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHNoYXBlLXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIiB0ZXh0LXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIiBpbWFnZS1yZW5kZXJpbmc9Im9wdGltaXplUXVhbGl0eSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHZpZXdCb3g9IjAgMCA1MDkgNTA5Ij48ZyBmaWxsLXJ1bGU9Im5vbnplcm8iPjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik01MDkgMjU0LjVDNTA5IDExMy45NCAzOTUuMDYgMCAyNTQuNSAwUzAgMTEzLjk0IDAgMjU0LjVDMCAzNzMuODYgODIuMTcgNDc0IDE5My4wMiA1MDEuNTFWMzMyLjI3aC01Mi40OFYyNTQuNWg1Mi40OHYtMzMuNTFjMC04Ni42MyAzOS4yLTEyNi43OCAxMjQuMjQtMTI2Ljc4IDE2LjEzIDAgNDMuOTUgMy4xNyA1NS4zMyA2LjMzdjcwLjVjLTYuMDEtLjYzLTE2LjQ0LS45NS0yOS40LS45NS00MS43MyAwLTU3Ljg2IDE1LjgxLTU3Ljg2IDU2LjkxdjI3LjVoODMuMTNsLTE0LjI4IDc3Ljc3aC02OC44NXYxNzQuODdDNDExLjM1IDQ5MS45MiA1MDkgMzg0LjYyIDUwOSAyNTQuNXoiLz48cGF0aCBmaWxsPSJ0cmFuc3BhcmVudCIgZD0iTTM1NC4xOCAzMzIuMjdsMTQuMjgtNzcuNzdoLTgzLjEzVjIyN2MwLTQxLjEgMTYuMTMtNTYuOTEgNTcuODYtNTYuOTEgMTIuOTYgMCAyMy4zOS4zMiAyOS40Ljk1di03MC41Yy0xMS4zOC0zLjE2LTM5LjItNi4zMy01NS4zMy02LjMzLTg1LjA0IDAtMTI0LjI0IDQwLjE2LTEyNC4yNCAxMjYuNzh2MzMuNTFoLTUyLjQ4djc3Ljc3aDUyLjQ4djE2OS4yNGMxOS42OSA0Ljg4IDQwLjI4IDcuNDkgNjEuNDggNy40OSAxMC40NCAwIDIwLjcyLS42NCAzMC44My0xLjg2VjMzMi4yN2g2OC44NXoiLz48L2c+PC9zdmc+");
}

.icon-x {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHNoYXBlLXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIiB0ZXh0LXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIiBpbWFnZS1yZW5kZXJpbmc9Im9wdGltaXplUXVhbGl0eSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHZpZXdCb3g9IjAgMCA1MTIgNDYyLjc5OSI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTQwMy4yMjkgMGg3OC41MDZMMzEwLjIxOSAxOTYuMDQgNTEyIDQ2Mi43OTlIMzU0LjAwMkwyMzAuMjYxIDMwMS4wMDcgODguNjY5IDQ2Mi43OTloLTc4LjU2bDE4My40NTUtMjA5LjY4M0wwIDBoMTYxLjk5OWwxMTEuODU2IDE0Ny44OEw0MDMuMjI5IDB6bS0yNy41NTYgNDE1LjgwNWg0My41MDVMMTM4LjM2MyA0NC41MjdoLTQ2LjY4bDI4My45OSAzNzEuMjc4eiIvPjwvc3ZnPg==");
}

.icon-instagram {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHNoYXBlLXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIiB0ZXh0LXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIiBpbWFnZS1yZW5kZXJpbmc9Im9wdGltaXplUXVhbGl0eSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNzAuNjYzIDI1Ni4xNTdjLS4wODMtNDcuMTIxIDM4LjA1NS04NS40IDg1LjE2Ny04NS40ODMgNDcuMTIxLS4wOTIgODUuNDA3IDM4LjAzIDg1LjQ5OSA4NS4xNi4wOTEgNDcuMTI5LTM4LjA0NyA4NS40LTg1LjE3NiA4NS40OTItNDcuMTEyLjA5LTg1LjM5OS0zOC4wMzktODUuNDktODUuMTY5em0tNDYuMTA4LjA5MWMuMTQxIDcyLjYwMiA1OS4xMDYgMTMxLjMyNyAxMzEuNjkgMTMxLjE4NiA3Mi41OTItLjE0MSAxMzEuMzUtNTkuMDkgMTMxLjIwOS0xMzEuNjkyLS4xNDEtNzIuNTc3LTU5LjExNC0xMzEuMzM1LTEzMS43MTUtMTMxLjE5NC03Mi41ODUuMTQxLTEzMS4zMjUgNTkuMTE1LTEzMS4xODQgMTMxLjd6bTIzNy4xMDQtMTM3LjA5MWMuMDMzIDE2Ljk1MyAxMy44MTcgMzAuNjgxIDMwLjc3MiAzMC42NDggMTYuOTYxLS4wMzMgMzAuNjg5LTEzLjgxMSAzMC42NjQtMzAuNzY0LS4wMzMtMTYuOTU0LTEzLjgxOC0zMC42OS0zMC43OC0zMC42NTctMTYuOTYyLjAzMy0zMC42ODkgMTMuODE4LTMwLjY1NiAzMC43NzN6bS0yMDguNjk2IDM0NS40Yy0yNC45NTgtMS4wODctMzguNTExLTUuMjM0LTQ3LjU0My04LjcwOS0xMS45NjEtNC42MjktMjAuNDk2LTEwLjE3OC0yOS40NzktMTkuMDk0LTguOTY2LTguOTUtMTQuNTMyLTE3LjQ2LTE5LjIwMi0yOS4zOTctMy41MDgtOS4wMzItNy43My0yMi41NjktOC45LTQ3LjUyNy0xLjI2OS0yNi45ODItMS41NTktMzUuMDc3LTEuNjgzLTEwMy40MzItLjEzMy02OC4zMzkuMTE2LTc2LjQzNCAxLjI5NC0xMDMuNDQxIDEuMDY5LTI0Ljk0MiA1LjI0Mi0zOC41MTIgOC43MDktNDcuNTM2IDQuNjI4LTExLjk3NyAxMC4xNjEtMjAuNDk2IDE5LjA5NC0yOS40NzkgOC45NDktOC45ODIgMTcuNDU5LTE0LjUzMiAyOS40MDMtMTkuMjAyIDkuMDI1LTMuNTI1IDIyLjU2MS03LjcxNCA0Ny41MTEtOC45IDI2Ljk5OC0xLjI3NyAzNS4wODUtMS41NTEgMTAzLjQyMy0xLjY4NCA2OC4zNTMtLjEzMiA3Ni40NDguMTA4IDEwMy40NTYgMS4yOTUgMjQuOTQgMS4wODYgMzguNTEgNS4yMTcgNDcuNTI3IDguNzA5IDExLjk2OCA0LjYyOCAyMC41MDMgMTAuMTQ0IDI5LjQ3OCAxOS4wOTQgOC45NzQgOC45NSAxNC41NCAxNy40NDMgMTkuMjEgMjkuNDEyIDMuNTI0IDkgNy43MTQgMjIuNTUzIDguODkyIDQ3LjQ5NCAxLjI4NSAyNi45OTkgMS41NzYgMzUuMDk1IDEuNyAxMDMuNDMzLjEzMiA2OC4zNTUtLjExNyA3Ni40NTEtMS4zMDIgMTAzLjQ0MS0xLjA4NyAyNC45NTgtNS4yMjYgMzguNTItOC43MDkgNDcuNTYxLTQuNjI5IDExLjk1Mi0xMC4xNjEgMjAuNDg3LTE5LjEwMyAyOS40NzEtOC45NDEgOC45NDktMTcuNDUxIDE0LjUzMS0yOS40MDMgMTkuMjAxLTkuMDA5IDMuNTE3LTIyLjU2MSA3LjcxNC00Ny40OTQgOC45LTI2Ljk5OCAxLjI2OS0zNS4wODYgMS41NTktMTAzLjQ0OCAxLjY4NC02OC4zMzguMTMyLTc2LjQyNC0uMTI1LTEwMy40MzEtMS4yOTR6TTE0OS45NzcgMS43NzNjLTI3LjIzOSAxLjI4NS00NS44NDMgNS42NDgtNjIuMTAxIDEyLjAxOC0xNi44MjkgNi41NjEtMzEuMDk1IDE1LjM1NC00NS4yODYgMjkuNjA0QzI4LjM4MSA1Ny42NTMgMTkuNjU1IDcxLjk0NCAxMy4xNDQgODguNzljLTYuMzAzIDE2LjI5OS0xMC41NzUgMzQuOTEyLTExLjc3OCA2Mi4xNjhDLjE3MiAxNzguMjY0LS4xMDIgMTg2Ljk3My4wMzEgMjU2LjQ4OWMuMTMzIDY5LjUwOC40MzkgNzguMjM0IDEuNzQxIDEwNS41NDcgMS4zMDIgMjcuMjMxIDUuNjQ5IDQ1LjgyOCAxMi4wMTkgNjIuMDkzIDYuNTY5IDE2LjgzIDE1LjM1MyAzMS4wODggMjkuNjExIDQ1LjI4OCAxNC4yNSAxNC4yMDEgMjguNTUgMjIuOTE4IDQ1LjQwNCAyOS40MzggMTYuMjgyIDYuMjk1IDM0LjkwMiAxMC41ODMgNjIuMTUgMTEuNzc4IDI3LjMwNSAxLjIwMyAzNi4wMjIgMS40NjggMTA1LjUyMSAxLjMzNSA2OS41MzItLjEzMiA3OC4yNS0uNDM5IDEwNS41NTUtMS43MzMgMjcuMjM5LTEuMzAzIDQ1LjgyNi01LjY2NSA2Mi4xLTEyLjAxOSAxNi44MjktNi41ODYgMzEuMDk1LTE1LjM1MyA0NS4yODgtMjkuNjExIDE0LjE5MS0xNC4yNTEgMjIuOTE3LTI4LjU1IDI5LjQyOC00NS40MDUgNi4zMDQtMTYuMjgyIDEwLjU5Mi0zNC45MDMgMTEuNzc3LTYyLjEzNCAxLjE5NS0yNy4zMjIgMS40NzgtMzYuMDQ4IDEuMzQ0LTEwNS41NTYtLjEzMy02OS41MTYtLjQ0Ny03OC4yMjUtMS43NDEtMTA1LjUyMy0xLjI5NC0yNy4yNTUtNS42NTctNDUuODQ0LTEyLjAxOS02Mi4xMTgtNi41NzctMTYuODI5LTE1LjM1Mi0zMS4wNzktMjkuNjAyLTQ1LjI4Ny0xNC4yNS0xNC4xOTItMjguNTUtMjIuOTM1LTQ1LjQwNC0yOS40MjktMTYuMjktNi4zMDUtMzQuOTAzLTEwLjYwMS02Mi4xNS0xMS43NzlDMzMzLjc0Ny4xNjQgMzI1LjAzLS4xMDIgMjU1LjUwNi4wMzFjLTY5LjUwNy4xMzMtNzguMjI0LjQzMS0xMDUuNTI5IDEuNzQyeiIvPjwvc3ZnPg==");
}

/* Mobile Overrides */
@media screen and (max-width: 1180px) {

    body {
        font-size:16px;
    }

    h1 {
        font-size:3.3rem;
    }

    h2 {
        font-size: 2.16rem;
    }

    h3 {
        font-size: 1.41rem;
    }

    .header-content {
        max-width:100%;
    }

    .header-links {
        display:none;
    }

    .header-logo img {
        max-width:135px;
    }

    section {
        padding: calc(var(--gh-v) * 3) var(--gh-h);
        padding-top:0;
    }

    section .container {
        /*flex-direction: column;*/
        flex-direction: column-reverse;
        padding: 0 0;
    }

    section .container.text-right {
        /*flex-direction: column;*/
        flex-direction: column-reverse;
    }

    section .container .column {
        gap: calc(var(--gh-v) * 1.5);
    }

    .ballie-footer-content, .footer-content {
        gap: calc(var(--gh-v) * 2);
    }

    .footer-logo {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-logo a h3 {
        margin-top:3px;
    }

    .footer-content, .footer-locations {
        flex-direction: column;
    }

    .footer-copyright, .footer-links, .footer-address {
        text-align: center;
    }

}

@media screen and (max-width: 680px) {

    .wp-block-buttons>.wp-block-button.wp-block-button__width-25,
    .wp-block-buttons>.wp-block-button.wp-block-button__width-50,
    .wp-block-buttons>.wp-block-button.wp-block-button__width-75 {
        width:100%;
    }

    .wp-block-buttons {
        flex-wrap: wrap !important;
    }

}

.image-220 {
    width:220px;
    height:220px;
}

.staging-header::after {
    content: "Staging test site";
    color: white;
    background-color: var(--wp--preset--color--ballie-pink-deep);
    display: block;
    position: absolute;
    bottom: -1.5rem;
    left: 0;
    width: 100%;
    text-align: center;
}

a.btn-primary {
    text-decoration: none;
    color: var(--wp--preset--color--ballie-white) !important;
}

a.btn-primary span {
    color: var(--wp--preset--color--ballie-green-dark);
}