/* 
    Created on : 3 Jul 2023, 18:24:11
    Author     : Noel Hinton
*/

body {
    font-family: "Nunito", sans-serif;
}
body * {box-sizing: border-box;}

.wp-site-blocks:before {
    content:""; position: fixed; width: 100%; height: 100%; background-image:url('../images/bg-pattern.png'); background-size: 236px; opacity: 0.25;
}
h1,h2,h3 {overflow-wrap:initial; word-break:initial;}

main p {margin-bottom: 1rem !important;}

main ::-webkit-scrollbar { height: 5px; width:5px; }
main ::-webkit-scrollbar-track { background: transparent; }
main ::-webkit-scrollbar-thumb { background: var(--wp--preset--color--secondary); }


/*      HELPERS         */
.rounded-10 {border-radius:10px; margin-bottom: -10px !important; position: relative; }
.rounded-20 {border-radius:20px; margin-bottom: -20px !important; position: relative; }
.rounded-b {border-top-left-radius: 0; border-top-right-radius: 0;}
.rounded-t {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}

.shadow {box-shadow: 0 2px 6px rgba(0,0,0,0.25);}

.text-uppercase {text-transform: uppercase;}
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}

@media screen and (max-width: 781px) {
    .show-for-medium {display: none !important;}
}
@media screen and (max-width: 1199px) {
    .show-for-large {display: none !important;}
}


/*      ELEMENTS        */
.store-search input {border-radius: 20px; border:0; box-shadow: 0 2px 6px rgba(0,0,0,0.2) inset; padding: 10px; text-transform: uppercase; outline-color:var(--wp--preset--color--tertiary);
    transition: all 0.5s cubic-bezier(.1,0.7,0.3,0.9);}
main {z-index: 8; position: relative;  }
main > .has-global-padding {padding: 0 !important;}
header i.fa-bars {font-size: 2rem;}
@media screen and (min-width: 1200px) {
    .wp-site-blocks {padding-bottom: 2rem;}
    header i.fa-bars {display: none;}
}


/*      BLOCKS          */
.wp-block-columns.border-b {border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; margin-bottom: -20px; overflow: hidden;}
.wp-block-columns.border-b + .wp-block-columns.border-b > .wp-block-column.has-background {padding-top: 50px !important;}
.wp-block-column {position: relative; }
.wp-block-column:first-child {z-index:2;}

.wp-block-column.is-layout-flow {display: flex; flex-direction: column; justify-content: space-between;}
.wp-block-group > .wp-block-columns:nth-child(1) {position: relative; z-index: 10;}
.wp-block-group > .wp-block-columns:nth-child(2) {position: relative; z-index: 9;}
.wp-block-group > .wp-block-columns:nth-child(3) {position: relative; z-index: 8;}
.wp-block-group > .wp-block-columns:nth-child(4) {position: relative; z-index: 7;}
.wp-block-group > .wp-block-columns:nth-child(5) {position: relative; z-index: 6;}
@media screen and (max-width: 781px) {
    .wp-block-columns.border-b.has-background {padding: 50px 0;}
    .wp-block-columns.border-b > .wp-block-column.has-background {border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; margin-bottom:-20px; padding-bottom: 50px !important; }
    .wp-block-columns.border-b > .wp-block-column.has-background:last-child {padding-top: 50px !important;}
}




/*      PATTERNS        */
.banner {background:var(--wp--preset--color--secondary); color:white; position: relative; z-index: 10;
    display: flex; justify-content: center; padding: 0.5rem; }

.masthead {background: #fff; position: relative; z-index: 9; padding: 20px 2rem 10px; flex-wrap: nowrap !important; gap:1rem !important;}
@media screen and (max-width: 1199px) {
    .masthead {padding: 20px 1rem 10px;}
}

.logo img {width:200px; display: block;}
@media screen and (max-width: 1199px) {
    .logo img {margin-right: 0;}
}
@media screen and (max-width: 639px) {
    .logo img {width:150px;}
}

nav.main-navigation {flex-grow: 1;}
nav.main-navigation ul {display: flex; list-style: none; margin: 0; padding: 0;}
nav.main-navigation ul li {text-transform: none; font-weight:900; font-size:1.125rem; padding: 0 1rem; border: solid var(--wp--preset--color--secondary);
    flex-grow: 1; text-align: center; border-width: 0 0 0 2px;}
nav.main-navigation ul li:first-of-type {border-width: 0;}
nav.main-navigation ul li a {color:var(--wp--preset--color--base); transition: color 0.5s cubic-bezier(.1,0.7,0.3,0.9);}
nav.main-navigation ul li a:hover {color:var(--wp--preset--color--secondary);}

.store-search input {padding-right: 2rem; padding-left: 1rem; position: relative; }
.store-search input:focus {border-radius: 20px 20px 0 0;}
.store-search input {width:100%; }
.store-search i {position: absolute; top:50%; right:0.75rem; transform: translateY(-50%); cursor: pointer;}

.header-search {position: relative; color:var(--wp--preset--color--tertiary);}
@media screen and (max-width: 1199px) {
    nav.main-navigation {position: absolute; top:100%; background: #fff; left:2rem; right:2rem; box-shadow: 0 3px 6px rgba(0,0,0,0.25);
        border-radius: 0 0 20px 20px; padding:0.75rem; border-top:1px solid #CCC; }
    nav.main-navigation ul li:first-child {border:none;}
    nav.main-navigation ul li a {font-size:0.875rem;}
    .header-search {flex-grow: 1; margin-right: 1rem;}
    .masthead:before {content:""; position: absolute; top:0; left:0; width:100%; height:100%; background: #fff; border-radius: 0 0 20px 20px;}
    .masthead .logo {position: relative;}
    body nav.main-navigation {transform: translateY(-100%); z-index: -1; transition: all 0.25s cubic-bezier(.1,0.7,0.3,0.9);}  
    body.menu-open nav.main-navigation {transform: translateY(0); opacity: 1;}  
}
@media screen and (max-width: 659px) {
    nav.main-navigation {padding: 0.25rem 2rem 0.5rem;}
    nav.main-navigation ul {flex-direction: column; }
    nav.main-navigation ul li {border-width: 2px 0 0 0; padding: 0.5rem;}
}

footer .footer-navigation {background:var(--wp--preset--color--primary); color:var(--wp--preset--color--contrast); padding: 40px 0 30px; position: relative; z-index: 2;}
footer .footer-navigation ul {display: flex; list-style: none; margin: 0; padding: 0 4rem; gap:1rem 4rem; justify-content: center; flex-wrap: wrap;}
footer .footer-navigation ul li {white-space: nowrap;}
footer .footer-navigation ul li a {transition: color 0.5s cubic-bezier(.1,0.7,0.3,0.9);}
footer .footer-navigation ul li a:hover {color:var(--wp--preset--color--quaternary);}

footer .footer-social {background:#333; color:var(--wp--preset--color--contrast); padding: 30px 0 15px;}
footer .footer-social ol {display: flex; list-style: none; margin: 0; padding: 0 4rem; gap:1.5rem; justify-content: center; font-size:2rem;}
footer .footer-social p {margin: 0; opacity: 0.5;}
footer .footer-social ol li a {transition: color 0.5s cubic-bezier(.1,0.7,0.3,0.9);}
footer .footer-social ol li a:hover {color:var(--wp--preset--color--quaternary);}


/*      SINGLE BRAND        */
.single-brand .wp-block-group {position: relative;}
.single-brand .stockist-title {position: absolute; top:100%; z-index: 2; display: flex; width: 100%; justify-content: center; transform: translateY(-45%); }
.single-brand .stockist-title h2 {border-radius: 50px; background-color:var(--wp--preset--color--secondary); color:#FFF;
    text-transform: uppercase; font-size:1.25rem; line-height: 1; margin: 0; padding: 7px 2rem;}



.brand {min-width:175px; display: flex; justify-content: center; align-items: center; border-radius: 20px; overflow: hidden;
    background-position: center; background-size: cover;}
.brand a {display: flex;}
.brand img, .brand figure {width: 100%; height: 100%; object-fit: contain; margin:0;}



/*				OMNI					*/
.omni { top:0; right:0; background: transparent; cursor: pointer; display:inline-block; pointer-events: all; 
    z-index:999; transition: all 0.5s cubic-bezier(0,0.75,0.25,1); height: 28px;  }
.omni__content {width: 1.5rem; height:1.5rem; position:relative;}
.omni span {border-top: 3px solid #000; display: block; position: absolute; transition: all 0.5s; left:0.75rem; top:0.75rem;}
.omni span:nth-child(1) {transform: translate(-0.7rem,-0.5rem); width:1.4rem;}
.omni span:nth-child(2) {transform: translate(-0.7rem,0); width:1.4rem;}
.omni span:nth-child(3) {transform: translate(-0.7rem,0.5rem); width:1.4rem;}
.omni.right span:nth-child(1) {transform: translate(-0.7rem,-0.4rem) rotate(45deg); width:80%;}
.omni.right span:nth-child(2) {opacity: 0;}
.omni.right span:nth-child(3) {transform: translate(-0.7rem,0.4rem) rotate(-45deg);width:80%;}
.omni.close span:nth-child(1) {transform: translate(-0.9rem,0) rotate(-45deg); width: 1.75rem;}
.omni.close span:nth-child(2) {opacity: 0;}
.omni.close span:nth-child(3) {transform: translate(-0.9rem,0) rotate(45deg); width: 1.75rem;}
.omni.left span:nth-child(1) {transform: translate(-0.7rem,-0.4rem) rotate(-45deg); width:80%;}
.omni.left span:nth-child(2) {opacity: 0;}
.omni.left span:nth-child(3) {transform: translate(-0.7rem,0.4rem) rotate(45deg);width:80%;}
@media screen and (min-width: 1200px) {
    .omni {display: none;}
}


.wp-block-video video {display: block;}


.wp-block-cover.contain img {object-fit: contain !important;}



/*                  404                 */
.error404 .has-404-background {background: url('../images/bg-404.png');}
.error404 .wp-block-media-text__media img {max-width:200px;}
@media screen and (max-width: 599px) {
    .error404 .wp-block-media-text.is-stacked-on-mobile {gap:2rem;}
    .error404 .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {grid-row:3; text-align: center;}
}